欢迎来到天天文库
浏览记录
ID:14764439
大小:36.00 KB
页数:3页
时间:2018-07-30
《js实现图片无缝滚动的完美解决_无间隙滚动》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、想必大家都注意到的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。先了解
2、一下对象的几个的属性:innerHTML:设置或获取位于对象起始和结束标签内的HTMLscrollHeight:获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置off
3、setTop:获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置offsetWidth:获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的宽度好,先看这个向上滚动的代码: <
4、imgsrc="images/link/flashempire.gif"> 5、c="/Upload/2004_Pack/link.gif">
5、c="/Upload/2004_Pack/link.gif">
7、divid=demostyle=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff> 8、eng.gif">
8、eng.gif">
此文档下载收益归作者所有