前端HTML调用jQuery库，图片显示隐藏（前端：HTML搭配jQuery系列教程九）

最新推荐文章于 2021-06-09 21:45:23 发布

Kkh_8686

最新推荐文章于 2021-06-09 21:45:23 发布

阅读量474

点赞数

本文链接：https://blog.csdn.net/K_AAbb/article/details/116952763

版权

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>

运行效果图：
在这里插入图片描述

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>该智能小车从硬件搭建、后台服务搭建、前端设计，都是由我们帅帅的、有点小可爱的胡登砚同学开发的！2021年9月18日</p>
    </div>
</body>
</html>