jquery 实例小技巧

lqh198722
149 阅读2分钟

一、下拉菜单实例

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/11.css">
    <script src="jQuery.js"></script>
</head>

<body>
<script>
    $(function () {

        $('.aa').hover(function () {
            $(this).find('.dropmenudiv').stop().slideToggle(100);
        });


    });

</script>

<div class="container">
    <div class="con-box">
      <div class="wrap">
          <div class="logo"><img src="img/logo.png" alt=""></div>
      </div>
    </div>
    <div class="ul-list">
        <div class="wrap">
            <ul>
                <li><a href="index.jsp">学院首页</a></li>
                <li class="aa">
                    <a rel="NavigSimple_2" href="xyjs.jsp">学院概况</a>
                    <div class="dropmenudiv">
                        <a href="list.jsp?itemId=9&amp;cItemId=142">党群部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=143">行政部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=144">教学系部</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=145">教辅部门</a>
                    </div>
                </li>
                <li><a rel="NavigSimple_960" href="list.jsp?itemId=1164&cItemId=1165" target="_blank">专业建设</a></li>
                <li><a rel="NavigSimple_9" href="list.jsp?itemId=9&cItemId=142">机构设置</a></li>
                <li class="aa">
                    <a rel="NavigSimple_958" href="http://zsjyb.gzeic.edu.cn/" target="_blank">招生就业</a>
                    <div class="dropmenudiv">
                        <a href="list.jsp?itemId=9&amp;cItemId=142">党群部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=143">行政部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=144">教学系部</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=145">教辅部门</a>
                    </div>
                </li>

                <li><a rel="NavigSimple_22">党建思政</a></li>
                <li class="aa">
                    <a rel="NavigSimple_6" href="xxfw.jsp">学校服务</a>
                    <div class="dropmenudiv">
                        <a href="list.jsp?itemId=9&amp;cItemId=142">党群部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=143">行政部门</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=144">教学系部</a>
                        <a href="list.jsp?itemId=9&amp;cItemId=145">教辅部门</a>
                    </div>
                </li>
                <li><a rel="NavigSimple_7" href="list.jsp?itemId=7">教学科研</a></li>
                <li><a rel="NavigSimple_10" href="xxgk.jsp">信息公开</a></li>
                <li><a rel="NavigSimple_11" href="hdjl.jsp">互动交流</a></li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

css部分

* {
  padding: 0;
  margin: 0;
}

.wrap {
  width: 1080px;
  margin: 0 auto;
}

.container .con-box {
  background: #0c5ea7;
  height: 121px;
}
.container .con-box .logo {
  width: 984px;
  height: 121px;
  margin: 0 auto;
}
.container .con-box .logo img {
  width: 100%;
}
.container .ul-list {
  background: #105692;
  height: 45px;
}
.container .ul-list ul {
  list-style: none;
  background: #105692;
}
.container .ul-list ul li {
  width: 108px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  position: relative;
  float: left;
}
.container .ul-list ul li > a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  display: block;
}
.container .ul-list ul li .dropmenudiv {
  position: absolute;
  top: 45px;
  left: 0;
  background: whitesmoke;
  display: none;
}
.container .ul-list ul li .dropmenudiv > a {
  width: 110px;
  height: 30px;
  text-decoration: none;
  color: black;
  display: block;
  border: 1px solid #ccc;
  border-top: 1px solid transparent;
  font-size: 12px;
  text-align: left;
  padding: 0 0 0 15px;
  line-height: 30px;
  background: url("../img/bit.gif") no-repeat 4px center;
}
.container .ul-list ul li .dpcs1 {
  display: block;
}

/*# sourceMappingURL=11.css.map */

二、jQuery淡入淡出以及突出显示案例, 设置透明度

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/27.css">
    <script src="./jQuery.js"></script>
    <script>
         $(function () {
            //jQuery淡入淡出以及突出显示案例, 设置透明度
             $("button").eq(0).click(function () {
                 $("div").fadeIn(1000);
             })
             $("button").eq(1).click(function () {
                 $("div").fadeOut(1000);
             })
             $("button").eq(2).click(function () {
                 $("div").fadeToggle(1000);
             })
             $("button").eq(3).click(function () {
                 $("div").fadeTo(1000,0.5);
             })



         });
    </script>
<style>
    div {
        width: 200px;
        height: 400px;
        background: pink;
    }
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<button>透明度</button>
<div></div>


</body>
</html>

三、表格根据价格，标题进行查找。

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 400px;
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 0 auto;
        }
        
        td,
        th {
            border: 1px solid #000;
            text-align: center;
        }
        
        input {
            width: 50px;
        }
        
        .search {
            width: 600px;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="search">
        按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>


        </tbody>
    </table>
    <script>
        // 利用新增数组方法操作数据
        var data = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        }, ];

        // 1. 获取相应的元素
        var tbody = document.querySelector('tbody');
        var start = document.querySelector('.start');
        var end = document.querySelector('.end');
        var search_price = document.querySelector('.search-price');
        var product = document.querySelector('.product');
        var search_pro = document.querySelector('.search-pro');

        setDate(data);
        function setDate(newData) {
            //先清空tbody里的内容。
            tbody.innerHTML = "";
            newData.forEach(function (value) {
                //创建tr 标签，并把tr标签添加到tbody里面去。
                var tr = document.createElement('tr');
                tr.innerHTML = "<td>"+value.id+"</td><td>"+value.pname+"</td><td>"+value.price+"</td>"
                tbody.appendChild(tr);
            });
        }


        //单击价格进行查询
        search_price.addEventListener('click',function () {
            var newData = data.filter(function (value) {
                //一个区间范围
                return  value.price >= start.value && value.price <= end.value;
            })
            setDate(newData);
        });

        search_pro.addEventListener('click',function () {
            var arr = [];
            //some找到唯一的值，找到就终止寻找，查找效率更高。
            data.some(function (value) {
               if(product.value === value.pname){
                    arr.push(value);
                    return true;
               }

            })
            //调用函数，进行筛选。
            setDate(arr);

        })


    </script>
</body>

</html>

四、购物车

image.png

html部分

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>我的购物车-品优购</title>
    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css">
    <!-- 先引入jquery  -->
    <script src="js/jquery.min.js"></script>
    <!-- 在引入我们自己的js文件 -->
    <script src="js/cars.js"></script>
</head>

<body>
    <!-- 顶部快捷导航start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！ </li>
                    <li>
                        <a href="#">请登录</a>
                        <a href="#" class="style-red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的品优购</a>
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部快捷导航end  -->


    <div class="car-header">
        <div class="w">
            <div class="car-logo">
                <img src="img/logo.png" alt=""> <b>购物车</b>
            </div>
        </div>
    </div>

    </div>
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div class="cart-warp">
                <!-- 头部全选模块 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" class="checkall"> 全选
                    </div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">单价</div>
                    <div class="t-num">数量</div>
                    <div class="t-sum">小计</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品详细模块 -->
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" checked class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                        </div>
                        <div class="p-price">￥12.60</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" autocomplete="off" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥12.60</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p2.jpg" alt="">
                            </div>
                            <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
                        </div>
                        <div class="p-price">￥24.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" autocomplete="off" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥24.80</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p3.jpg" alt="">
                            </div>
                            <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
                        </div>
                        <div class="p-price">￥29.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" autocomplete="off" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥29.80</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                </div>

                <!-- 结算模块 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" class="checkall">全选
                    </div>
                    <div class="operation">
                        <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
                        <a href="javascript:;" class="clear-all">清理购物车</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已经选<em>1</em>件商品</div>
                        <div class="price-sum">总价： <em>￥12.60</em></div>
                        <div class="btn-area">去结算</div>
                    </div>
                </div>
            </div>
        </div>

    </div>

<!--    &lt;!&ndash; footer start &ndash;&gt;-->
<!--    <div class="footer">-->
<!--        <div class="w">-->
<!--            &lt;!&ndash; mod_service &ndash;&gt;-->
<!--            <div class="mod_service">-->
<!--                <ul>-->
<!--                    <li>-->
<!--                        <i class="mod-service-icon mod_service_zheng"></i>-->
<!--                        <div class="mod_service_tit">-->
<!--                            <h5>正品保障</h5>-->
<!--                            <p>正品保障，提供发票</p>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <i class="mod-service-icon mod_service_kuai"></i>-->
<!--                        <div class="mod_service_tit">-->
<!--                            <h5>正品保障</h5>-->
<!--                            <p>正品保障，提供发票</p>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <i class="mod-service-icon mod_service_bao"></i>-->
<!--                        <div class="mod_service_tit">-->
<!--                            <h5>正品保障</h5>-->
<!--                            <p>正品保障，提供发票</p>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <i class="mod-service-icon mod_service_bao"></i>-->
<!--                        <div class="mod_service_tit">-->
<!--                            <h5>正品保障</h5>-->
<!--                            <p>正品保障，提供发票</p>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <i class="mod-service-icon mod_service_bao"></i>-->
<!--                        <div class="mod_service_tit">-->
<!--                            <h5>正品保障</h5>-->
<!--                            <p>正品保障，提供发票</p>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
<!--            &lt;!&ndash; mod_help &ndash;&gt;-->
<!--            <div class="mod_help">-->
<!--                <dl class="mod_help_item">-->
<!--                    <dt>购物指南</dt>-->
<!--                    <dd> <a href="#">购物流程 </a></dd>-->
<!--                    <dd> <a href="#">会员介绍 </a></dd>-->
<!--                    <dd> <a href="#">生活旅行/团购 </a></dd>-->
<!--                    <dd> <a href="#">常见问题 </a></dd>-->
<!--                    <dd> <a href="#">大家电 </a></dd>-->
<!--                    <dd> <a href="#">联系客服 </a></dd>-->
<!--                </dl>-->
<!--                <dl class="mod_help_item">-->
<!--                    <dt>购物指南</dt>-->
<!--                    <dd> <a href="#">购物流程 </a></dd>-->
<!--                    <dd> <a href="#">会员介绍 </a></dd>-->
<!--                    <dd> <a href="#">生活旅行/团购 </a></dd>-->
<!--                    <dd> <a href="#">常见问题 </a></dd>-->
<!--                    <dd> <a href="#">大家电 </a></dd>-->
<!--                    <dd> <a href="#">联系客服 </a></dd>-->
<!--                </dl>-->
<!--                <dl class="mod_help_item">-->
<!--                    <dt>购物指南</dt>-->
<!--                    <dd> <a href="#">购物流程 </a></dd>-->
<!--                    <dd> <a href="#">会员介绍 </a></dd>-->
<!--                    <dd> <a href="#">生活旅行/团购 </a></dd>-->
<!--                    <dd> <a href="#">常见问题 </a></dd>-->
<!--                    <dd> <a href="#">大家电 </a></dd>-->
<!--                    <dd> <a href="#">联系客服 </a></dd>-->
<!--                </dl>-->
<!--                <dl class="mod_help_item">-->
<!--                    <dt>购物指南</dt>-->
<!--                    <dd> <a href="#">购物流程 </a></dd>-->
<!--                    <dd> <a href="#">会员介绍 </a></dd>-->
<!--                    <dd> <a href="#">生活旅行/团购 </a></dd>-->
<!--                    <dd> <a href="#">常见问题 </a></dd>-->
<!--                    <dd> <a href="#">大家电 </a></dd>-->
<!--                    <dd> <a href="#">联系客服 </a></dd>-->
<!--                </dl>-->
<!--                <dl class="mod_help_item">-->
<!--                    <dt>购物指南</dt>-->
<!--                    <dd> <a href="#">购物流程 </a></dd>-->
<!--                    <dd> <a href="#">会员介绍 </a></dd>-->
<!--                    <dd> <a href="#">生活旅行/团购 </a></dd>-->
<!--                    <dd> <a href="#">常见问题 </a></dd>-->
<!--                    <dd> <a href="#">大家电 </a></dd>-->
<!--                    <dd> <a href="#">联系客服 </a></dd>-->
<!--                </dl>-->
<!--                <dl class="mod_help_item mod_help_app">-->
<!--                    <dt>帮助中心</dt>-->
<!--                    <dd>-->
<!--                        <img src="upload/erweima.png" alt="">-->
<!--                        <p>品优购客户端</p>-->
<!--                    </dd>-->
<!--                </dl>-->
<!--            </div>-->

<!--            &lt;!&ndash; mod_copyright  &ndash;&gt;-->
<!--            <div class="mod_copyright">-->
<!--                <p class="mod_copyright_links">-->
<!--                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U-->
<!--                </p>-->
<!--                <p class="mod_copyright_info">-->
<!--                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702-->
<!--                </p>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; footer end &ndash;&gt;-->
</body>

</html>

js部分

$(function () {
    getSumAndPrice();
   //全选 按钮  checkall   单个商品的复选框  j-checkbox
    $(".checkall").change(function () {
        $(".j-checkbox").prop("checked",$(this).prop("checked"));
        $(".checkall").prop('checked',$(this).prop("checked"));

    });

    //当每一个复选框都选中时，上下两个复选框选中。
    $(".j-checkbox").change(function () {
        if ( $(".j-checkbox").length ===  $(".j-checkbox:checked").length) {
            $(".checkall").prop('checked',true);
        } else {
            $(".checkall").prop('checked',false);
        }

    });

    // .increment 当点击加号按钮时
    $(".increment").click(function () {
        //获取购物车里单个商品的数量
        var num = $(this).siblings(".itxt").val();
        //每点击一次自加1
        num++;
        //把自加数量显示在text 文本框里面。
        $(this).siblings(".itxt").val(num);
        //获取单价
        var price = $(this).parents(".p-num").siblings(".p-price").text().slice(1);
        //修改总价
        $(this).parents(".p-num").siblings(".p-sum").text("￥"+ (price*num).toFixed(2) );

        //商品总数
        getSumAndPrice();
    });


    //.decrement 当点击减号按钮时
    $(".decrement").click(function () {
        //获取购物车里单个商品的数量
        var num = $(this).siblings(".itxt").val();
        //如果文本框数量为1，停止自减。
        if (num <= 1)  return false;
        //每点击一次自减1
        num = num - 1;
        //把自减数量显示在text 文本框里面。
        $(this).siblings(".itxt").val(num);
        //获取单价
        var price = $(this).parents(".p-num").siblings(".p-price").text().slice(1);
        //修改总价
        $(this).parents(".p-num").siblings(".p-sum").text("￥"+ (price*num).toFixed(2) );

        getSumAndPrice();
    });

    //获取购物车中商品的总价和总数量。

    function getSumAndPrice() {
        //商品总数量
        var count = 0;
        //商品总价格
        var totalPrice = 0;
        $(".itxt").each(function (index,element) {
        count += parseInt($(element).val());
        });

        //把自加的商品数量放在中商品数的div 下的em 中。
        $(".amount-sum em").text(count);

        //商品总价
        $(".p-sum").each(function (index,element) {
            totalPrice += parseFloat($(element).text().slice(1));
        });

        //把总价放在 price-sum 类名的div中。
        $(".price-sum").text("￥" + totalPrice.toFixed(2));
    }

    // 4. 用户修改文本框的值 计算 小计模块
    $(".itxt").change(function () {
        var price  = $(this).parents(".p-num").siblings(".p-price").text().slice(1);
        var count = $(this).val();
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + parseFloat(price*count).toFixed(2));
        //获取购物车中商品的总价和总数量。
        getSumAndPrice();
    });


});

百度网盘下载 链接: pan.baidu.com/s/1E7eau2Wi… 提取码: hup0 视频观看地址 www.bilibili.com/video/BV1Sy…

五、juery 实现返回顶部

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function () {
            //div 距离窗口顶部的距离
            var boxTop = $(".container").offset().top;

            //窗口滚动
            $(window).scroll(function () {
                //被卷去的长度
                $(document).scrollTop();
                if ($(document).scrollTop() > boxTop ) {
                    $(".back").stop().fadeIn();
                } else {
                    $(".back").stop().fadeOut();
                }
            });
            //返回顶部
            $(".back").click(function () {
                //没有动画效果
                //$(document).scrollTop(0)
                //不能是文档而是 html和body元素做动画
                $("body,html").stop().animate({
                    scrollTop: 0
                });
            });
        })
       
    </script>
</body>

</html>
avatar
文章
阅读
粉丝