問(wèn)題描述

如題，就是我現(xiàn)在有一排橫向排版的li，橫向可以自由滑動(dòng)，當(dāng)某個(gè)li處于當(dāng)前可視區(qū)域內(nèi)，就改變它的一些樣式，這樣的效果該怎么寫？

望各位大神幫忙解答。。。。。。。

問(wèn)題解答

借鑒：http://runjs.cn/code/yq5arlrf

element.getBoundingClientRect()

返回值是一個(gè) DOMRect 對(duì)象，這個(gè)對(duì)象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關(guān)的CSS 邊框集合 。

DOMRect 對(duì)象包含了一組用于描述邊框的只讀屬性——left、top、right和bottom，單位為像素。除了 width 和 height 外的屬性都是相對(duì)于視口的左上角位置而言的。

為什么一定要在可視區(qū)域才改變樣式，這樣做豈不是很麻煩。不如所有的都添加樣式，反正在非可是區(qū)域，什么樣的樣式有什么關(guān)系？！

標(biāo)注1所指向的上部紫色矩形為內(nèi)容列表已經(jīng)滑動(dòng)的距離標(biāo)注2指向的紅色區(qū)域是可視區(qū)域標(biāo)注3指向的是黃點(diǎn)也就是你要操作的對(duì)象距離內(nèi)容列表頂部的距離當(dāng)1+2-50=3的時(shí)候說(shuō)明黃點(diǎn)已經(jīng)進(jìn)入可視區(qū)域50px了

以上是思路，下面是我項(xiàng)目中的代碼，這個(gè)思路可以實(shí)現(xiàn)懶加載

<ul class='img-list'> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/Chrysanthemum.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/Desert.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/Jellyfish.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/Tulips.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/Penguins.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/Lighthouse.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/Koala.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/04.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/0img1.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/0img2.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/354350.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/aa.png’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/bj.jpg’></li> <li><img src='http://www.gepszalag.com/wenda/img/blank.png' data-url=’img/dd.png’></li></ul>

var timer,n=0;function lazyLoad(tagsName,tagsAttribute,oldUrl){ var tagsObj=document.getElementsByTagName(tagsName);//獲取對(duì)象 var seeHeight=document.documentElement.clientHeight;//獲取可視區(qū)域高度 var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;//獲取已經(jīng)滑動(dòng)區(qū)域的高度 for(i=n;i<tagsObj.length;i++){if(tagsObj[i].offsetTop < seeHeight+scrollTop-100){ if(tagsObj[i].getAttribute(’src’)==oldUrl){tagsObj[i].src=tagsObj[i].getAttribute(tagsAttribute); } n=n+1;} }}lazyLoad(’img’,’data-url’,’img/blank.png’);window.addEventListener(’scroll’,function(){ clearTimeout(timer); timer=setTimeout(function(){lazyLoad(’img’,’data-url’,’img/blank.png’); }, 300);});

我的是縱向的，橫向可以使用他們的left值作為判斷依據(jù)，希望能給題主一些思路

通過(guò)元素的visible屬性進(jìn)行判斷