用jquery如何写返回顶部功能和懒加载功能？（附代码）

来源：互联网发布：nginx启用gzip压缩编辑：程序博客网时间：2024/06/11 19:09

一、html：

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>返回顶部和懒加载</title>      <script src="jquery-3.1.1.min.js"></script>      <style>          body,html,p{margin:0;padding:0}          .container{width:980px;margin:0 auto;background: #ddd}          .pr{position:relative;}          img{display:block;border:none;}          .sideBar{width:40px;height:42px;position:absolute;top:848px;right:20px;background: #eee;padding: 10px 0;}          .sideBar:hover{cursor: pointer;background: #ddd;}          .sideBar p{padding-left: 6px;font-size:14px;color:#000;}          .sideBar p:hover{color:red;}          #toTop{width:0;height:0;border-style:solid;border-width:0px 10px 10px 10px;border-color:transparent transparent red transparent; line-height: 0px;_border-color: #000000 #000000 red #000000;_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');margin-left: 10px}      </style>  </head>  <body>      <div class="container">          <div class="pr b1">              <img src="images/1.jpg" alt="">          </div>          <div class="pr b2">              <img src="images/2.jpg" alt="2">          </div>          <div class="pr b3">              <img src="images/3.jpg" alt="3">          </div>          <div class="pr b4 bg">          </div>          <div class="pr b5 bg">          </div>          <div class="pr b6 bg">          </div>          <div class="pr b7 bg">          </div>          <div class="pr b8 bg">          </div>          <button>点击查看</button>    </div>      <div class="sideBar" style="display:none">          <p>返回顶部</p>          <div id="toTop"></div>      </div>      <script>  /*  *实现返回顶部  和懒加载  */  imgkv=new Image()imgkv.src="images/11.jpg"$("button").click(function(){$(".b1 img").attr('src', imgkv.src);});    $(window).scroll(function(){          var w_s=$(window).scrollTop()        var w_h=$(window).height()        var demo="demo";//初始化css变量          if (w_s<=100) {              $(".sideBar").hide()          }else{              $(".sideBar").show();              lazyloading(demo);              $(".sideBar").stop(true).animate({top: ((w_s+w_h)-62)+"px"})          }      })      $(".sideBar").bind('click',function(){          $("html,body").animate({scrollTop: 0}, 100)          return false;      });      function lazyloading(css_source){          if (!document.getElementById(css_source)) {              var link = document.createElement("link");              link.type = 'text/css';              link.rel = 'stylesheet';              link.href = "css/"+css_source+".css";              link.id=css_source;              document.getElementsByTagName("head")[0].appendChild(link);          }       }    </script>  </body>  </html>

二、引用的css:

.bg{width:980px;background-repeat: no-repeat;background-position: 0 0;}.b4{height:370px;background-image: url(../images/4.jpg);}.b5{height:410px;background-image: url(../images/5.jpg);}.b6{height:330px;background-image: url(../images/6.jpg);}.b7{height:360px;background-image: url(../images/7.jpg);}.b8{height:390px;background-image: url(../images/8.jpg);}

三、jquery版本我引用的为最新的

在jquery插件库这个网站可以下载引用（实时更新的）

四、关于图片可以自行找宽为980px的即可

最后：

说下主要原理：

1、返回顶部是绝对定位一个div,然后这个div的display设置为none，然后通过jquery的.scroll()方法来动态改变显示和隐藏，并且同时改变top值。

2、懒加载是监听.scroll()方法来加载未加载css样式文件

0 0