国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP，暢享免費(fèi)電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
jQuery實(shí)現(xiàn)頁面滾動圖片按需加載（轉(zhuǎn)載）
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>jquery scrolling</title>  
  6.     <link rel="stylesheet" href="css/style.css"/>  
  7. </head>  
  8. <body>  
  9.     <!--imgbox-->  
  10.     <div class="wrapper">  
  11.         <div class="img-box">  
  12.             <img src="img/1.png" />  
  13.         </div>  
  14.         <div class="img-box">  
  15.             <img src="img/2.png" />  
  16.         </div>  
  17.         <div  class="img-box">  
  18.             <img src="img/3.png" />  
  19.         </div>  
  20.         <div class="img-box">  
  21.             <img data-url="img/4.png" src="img/pix.png" />  
  22.         </div>  
  23.         <div class="img-box">  
  24.             <img data-url="img/5.png" src="img/pix.png" />  
  25.         </div>  
  26.         <div class="img-box">  
  27.             <img data-url="img/6.png" src="img/pix.png" />  
  28.         </div>  
  29.         <div class="img-box">  
  30.             <img data-url="img/7.png" src="img/pix.png" />  
  31.         </div>  
  32.         <div class="img-box">  
  33.             <img data-url="img/8.png" src="img/pix.png" />  
  34.         </div>  
  35.         <div class="img-box">  
  36.             <img data-url="img/9.png" src="img/pix.png" />  
  37.         </div>  
  38.         <div class="img-box">  
  39.             <img data-url="img/10.png" src="img/pix.png" />  
  40.         </div>  
  41.         <div class="img-box">  
  42.             <img data-url="img/11.png" src="img/pix.png" />  
  43.         </div>  
  44.         <div class="img-box">  
  45.             <img data-url="img/12.png" src="img/pix.png" />  
  46.         </div>  
  47.         <div class="img-box">  
  48.             <img data-url="img/13.png" src="img/pix.png" />  
  49.         </div>  
  50.         <div class="img-box">  
  51.             <img data-url="img/14.png" src="img/pix.png" />  
  52.         </div>  
  53.         <div class="img-box">  
  54.             <img data-url="img/15.png" src="img/pix.png" />  
  55.         </div>  
  56.         <div class="img-box">  
  57.             <img data-url="img/16.png" src="img/pix.png" />  
  58.         </div>  
  59.         <div class="img-box">  
  60.             <img data-url="img/17.png" src="img/pix.png" />  
  61.         </div>  
  62.         <div class="img-box">  
  63.             <img data-url="img/18.png" src="img/pix.png" />  
  64.         </div>  
  65.         <div class="img-box">  
  66.             <img data-url="img/19.png" src="img/pix.png" />  
  67.         </div>  
  68.         <div class="img-box">  
  69.             <img data-url="img/20.png" src="img/pix.png" />  
  70.         </div>  
  71.     </div>  
  72.   
  73.     <script src="js/jquery_1.9.js"></script>  
  74.     <script src="js/main.js"></script>  
  75. </body>  
  76. </html>  

  1. *{  
  2.     margin: 0;  
  3.     padding: 0;  
  4. }  
  5. /*wrapper*/  
  6. .wrapper{  
  7.     width: 500px;  
  8.     height: 5000px;  
  9.     margin: auto;  
  10. }  
  11. .img-box{  
  12.     width: 100%;  
  13.     margin-bottom: 20px;  
  14.     padding-bottom: 10px;  
  15.     height: 260px;  
  16.     text-align: center;  
  17.     border-bottom: 2px dashed #ccc;  
  18. }  
[javascript] view plain copy
 print?
  1. $(function(){  
  2.     var $wd = $(window),  
  3.         $img = $('img'),  
  4.         imgTop,          //圖片距離頂部高度  
  5.         scTop,             //滾動條高度  
  6.         wH;           //窗口高度  
  7.     wH = $wd.height();         //獲得可視瀏覽器的高度  
  8.     $wd.scroll( function() {  
  9.         scTop = $wd.scrollTop();       //獲取滾動條到頂部的垂直高度  
  10.         $img.each(function(){  
  11.             imgTop =  $(this).offset().top;  
  12.             if(imgTop - wH < scTop &&     //圖片必須出現(xiàn)在窗口底部上面  
  13.                 imgTop - wH > 0 &&        //排除首頁圖片  
  14.                 $(this).attr('src') != $(this).data('url')){          //排除已經(jīng)加載過的圖片  
  15.                    $(this).attr({  
  16.                        src: $(this).data('url')  
  17.                    });  
  18.             }  
  19.         });  
  20.     });  
  21. });  

原文鏈接：https://my.oschina.net/leipeng/blog/221911

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
超酷的翻書效果jquery代碼
jquery moblie磁貼作風(fēng)九宮格
jQuery---固定導(dǎo)航欄案例
基于HTML/CSS/JS微信公眾號展示頁面模板
jQuery篩選列表過濾插件Filterizr
在ecshop中實(shí)現(xiàn)商品詳細(xì)頁面的放大鏡功能
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服