jQuery实现图片的隐藏、显示、切换

最新推荐文章于 2025-10-15 22:39:35 发布

原创最新推荐文章于 2025-10-15 22:39:35 发布 · 1.1w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端同时被 2 个专栏收录

35 篇文章

订阅专栏

jQuery

9 篇文章

订阅专栏

本文详细介绍了如何利用jQuery库实现图片的隐藏、显示效果，并探讨了图片的无缝切换技巧，为网页动态交互提供实用的解决方案。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./jquery-2.2.4.min.js"></script>
        <script>    
            $(function() {
                //获取按钮并设置点击事件
                $("button").click(function() {
                    switch($(this).html()) {
                        case "隐藏":
                        $("img").hide(500);
                            break;
                        case "显示":
                        //显示
                        //$("img").show(500);
                        //下来效果显示
                        $("img").slideDown(1000);
                            break;
                        case "切换":
                        //$("img").toggle(500);
                        //渐变效果切换
                        $("img").fadeToggle("slow");
                            break;
                    }
                });
            });
        </script>

    </head>

    <body>
        <h2 id="hid">jQuery实例:特效</h2>
        <button>隐藏</button>
        <button>显示</button>
        <button>切换</button><br/><br/>
        <img src="./images/22.jpg" width="300" />
    </body>

</html>