前端HTML调用jQuery库,图片显示隐藏(前端:HTML搭配jQuery系列教程九)

1、正常地显示、隐藏图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
     
            $("#btn_hide").click(function(){
     
                $("img").hide();
            })
            $("#btn_show").click(function () {
     
                $("img").show();
            })
        })
    </script>
</head>
<body>
    <input id="btn_hide" type="button" value="隐藏" />
    <input id="btn_show" type="button" value="显示" /><br/>
    <img src="../practice/image/喷火龙.jpg" alt=""/>
</body>
</html>

2、动态地显示、隐藏图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
     
            $("#btn_hide").click(function(){
     
                $("img").hide("fast");
            })
            $("#btn_show").click(function () {
     
                $("img").show(500);
            })
        })
    </script>
</head>
<body>
    <input id="btn_hide" type="button" value="隐藏" />
    <input id="btn_show" type="button" value="显示" /><br/>
    <img src="../practice/image/喷火龙.jpg" alt=""/>
</body>
</html>

运行效果图:
前端HTML调用jQuery库,图片显示隐藏(前端:HTML搭配jQuery系列教程九)_第1张图片

3、图片淡入、淡出显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
     
            $("#btn_hide").click(function(){
     
                $("img").fadeOut();
            })
            $("#btn_show").click(function () {
     
                $("img").fadeIn();
            })
        })
    </script>
</head>
<body>
    <input id="btn_hide" type="button" value="淡出" />
    <input id="btn_show" type="button" value="淡入" /><br/>
    <img src="img/jquery.png" alt=""/>
</body>
</html>

4、点击某一内容,显示其它设定内容,继续点击,再隐藏

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{
      width:300px;}
        h3
        {
     
            text-align:center;
            padding:10px;
            background-color:#EEEEEE;
        }
        h3:hover
        {
     
            background-color:yellow;
            cursor:pointer;
        }
        p
        {
     
            background-color:greenyellow;
            padding:8px;
            line-height:24px;
            display:none;
        }
    </style>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
     
            //设置一个变量flag用于标记元素状态,是“滑下”还是“滑上”
            var flag = 0;
            $("h3").click(function () {
     
                if (flag == 0) {
     
                    $("p").slideDown();
                    flag = 1;
                }
                else {
     
                    $("p").slideUp();
                    flag = 0;
                }
            });
        })
    </script>
</head>
<body>
    <div>
        <h3>智能小车简介</h3>
        <p>该智能小车从硬件搭建、后台服务搭建、前端设计,都是由我们帅帅的、有点小可爱的胡登砚同学开发的!2021918</p>
    </div>
</body>
</html>

运行效果:

  • 点击前:
    前端HTML调用jQuery库,图片显示隐藏(前端:HTML搭配jQuery系列教程九)_第2张图片

  • 点击后:
    前端HTML调用jQuery库,图片显示隐藏(前端:HTML搭配jQuery系列教程九)_第3张图片

  • 继续点击:

  • 前端HTML调用jQuery库,图片显示隐藏(前端:HTML搭配jQuery系列教程九)_第4张图片

你可能感兴趣的:(前端HTML调用jQuery库,图片显示隐藏(前端:HTML搭配jQuery系列教程九))