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

最新推荐文章于 2024-07-24 23:00:08 发布

不就是睡觉吗

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量1.2k

点赞数 2

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_45611412/article/details/120958930

版权

方法一

(借鉴于https://blog.csdn.net/a_sid/article/details/53485013)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
<script src="jquery/jquery-3.1.1.js"></script>
<script>
    $(function ()
    {
        $("button").click(function ()
        {
            switch ($(this).html())
            {
                case "隐藏":
                    $("img").hide();
                    break;
                case "显示":
                    $("img").show();
                    // $("img").slideDown();    //下滑显示
                    // $("img").slideUp();      //上滑显示
                    break;
                case "切换":
                    $("img").toggle();
                    // $("img").slideToggle();      //上滑下滑交替显示
                    // $("img").fadeToggle();       //隐藏可见交替显示
                    break;
            }
        })
    })
</script>
</style>
</head>
<body>
        <button>隐藏</button>
        <button>显示</button>
        <button>切换</button>
        <br/><br/>
        <img src="image/桌面1.jpeg" width="600" />

</body>
</html>

界面显示

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="sj3/jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function ()
        {
            $("#btn").click(function ()
            {
                if($(this).val()=="隐藏") {
                    $("#pic").hide();
                    $(this).val("显示");
                }else
                {
                    $("#pic").show();
                    $(this).val("隐藏");
                }

            })
        })
    </script>
</head>
<body>
    <p><img src="sj3/image/桌面1.jpeg" id="pic" width="600"></p>
    <input type="button" value="隐藏" id="btn" >
</body>
</html>

不就是睡觉吗

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现图片的隐藏、显示、切换

方法一(借鉴于https://blog.csdn.net/a_sid/article/details/53485013)<!doctype html><html><head> <meta charset="utf-8"> <title></title><script src="jquery/jquery-3.1.1.js"></script><script> $(f
复制链接

扫一扫