扫码关注官方订阅号
84669人学习
65727人学习
82984人学习
467778人学习
498837人学习
471966人学习
256484人学习
152542人学习
224170人学习
139536人学习
81804人学习
85022人学习
11944人学习
20001人学习
60816人学习
5487人学习
15007人学习
2150人学习
6980人学习
194925人学习
359900人学习
1142人学习
19058人学习
3206人学习
180550人学习
48569人学习
17603人学习
40936人学习
1049人学习
750人学习
32909人学习
如题,就是我现在有一排横向排版的li,横向可以自由滑动,当某个li处于当前可视区域内,就改变它的一些样式,这样的效果该怎么写?
望各位大神帮忙解答。。。。。。。
欢迎选择我的课程,让我们一起见证您的进步~~
借鉴:http://runjs.cn/code/yq5arlrf
element.getBoundingClientRect()
返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。 DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
为什么一定要在可视区域才改变样式,这样做岂不是很麻烦。不如所有的都添加样式,反正在非可是区域,什么样的样式有什么关系?!
标注1所指向的上部紫色矩形为内容列表已经滑动的距离标注2指向的红色区域是可视区域标注3指向的是黄点也就是你要操作的对象距离内容列表顶部的距离当1+2-50=3的时候说明黄点已经进入可视区域50px了
以上是思路,下面是我项目中的代码,这个思路可以实现懒加载
<ul class="img-list"> <li><img src="img/blank.png" data-url='img/Chrysanthemum.jpg'></li> <li><img src="img/blank.png" data-url='img/Desert.jpg'></li> <li><img src="img/blank.png" data-url='img/Jellyfish.jpg'></li> <li><img src="img/blank.png" data-url='img/Tulips.jpg'></li> <li><img src="img/blank.png" data-url='img/Penguins.jpg'></li> <li><img src="img/blank.png" data-url='img/Lighthouse.jpg'></li> <li><img src="img/blank.png" data-url='img/Koala.jpg'></li> <li><img src="img/blank.png" data-url='img/04.jpg'></li> <li><img src="img/blank.png" data-url='img/0img1.jpg'></li> <li><img src="img/blank.png" data-url='img/0img2.jpg'></li> <li><img src="img/blank.png" data-url='img/354350.jpg'></li> <li><img src="img/blank.png" data-url='img/aa.png'></li> <li><img src="img/blank.png" data-url='img/bj.jpg'></li> <li><img src="img/blank.png" data-url='img/dd.png'></li> </ul>
var timer,n=0; function lazyLoad(tagsName,tagsAttribute,oldUrl){ var tagsObj=document.getElementsByTagName(tagsName);//获取对象 var seeHeight=document.documentElement.clientHeight;//获取可视区域高度 var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;//获取已经滑动区域的高度 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值作为判断依据,希望能给题主一些思路
通过元素的visible属性进行判断
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
精品班
技术支持
技术咨询
学习群
会员优惠
返回顶部
借鉴:http://runjs.cn/code/yq5arlrf
为什么一定要在可视区域才改变样式,这样做岂不是很麻烦。不如所有的都添加样式,反正在非可是区域,什么样的样式有什么关系?!
标注1所指向的上部紫色矩形为内容列表已经滑动的距离
标注2指向的红色区域是可视区域
标注3指向的是黄点也就是你要操作的对象距离内容列表顶部的距离
当1+2-50=3的时候说明黄点已经进入可视区域50px了
以上是思路,下面是我项目中的代码,这个思路可以实现懒加载
我的是纵向的,横向可以使用他们的left值作为判断依据,希望能给题主一些思路
通过元素的visible属性进行判断