欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

图片无缝滚动代码(向左/向下/向上)_javascript技巧

程序员文章站 2022-06-10 19:51:01
...
想必大家都注意到的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。

在原作者的基础上做了一定修改,主要还是在样式上面,将表格更换为标签。并且将JavaScript标准化,可以在所有浏览器运行。

先了解一下对象的几个的属性: innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
复制代码 代码如下:

图片上无缝滚动

向上滚动


图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧




图片下无缝滚动

向下滚动


图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧




图片左无缝滚动

向左滚动



图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧





图片右无缝滚动

向右滚动



图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧
图片无缝滚动代码(向左/向下/向上)_javascript技巧





相关标签: 无缝滚动