知识讲解:
(1)offsetWidth是什么?
答:它可以获取物体宽度的数值;offsetWidth实际获取的是盒模型(width+border + padding)的宽度。
如图:
(2)offsetLeft是什么?
答:获取的是当前对象左侧距离父对象左侧的值(均不包含border)。
另外: style.left: 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距。
clientLeft:获取的是当前对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离。
如果父对象的position定义为relative【相对定位】,子对象的position定义为absolute【绝对定位】,那么子对象的style.left的值是相对于父对象的值,等同于offsetLeft的值。
offsetLeft和style.left的区别:
1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便。
2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。
3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。 offsetLeft则仍然能够取到,无需事先定义div的位置。 //可以查看下面的案例代码(29、39行)
案例:无缝滚动图片
//css代码如上
以上js代码可以实现了简单的无缝滚动图片的方法。
代码解释:
1. 26行代码:获取到唯一的oDiv中的ul。若用getElementsByTagName来获取元素需要加上数组[0]才能准确的获取到ul的值;或者可以直接用getElementById来获取。(注:前面2019.4.27有发表过文章)
2. 35行代码:在计数器setInterval()函数中让ul中的内容向左不断滚动,每次向左移动5px的距离。
3. 32行代码:完成第二步代码后,要让ul中的图片连续在水平线上滚动起来需要获取到ul的宽度才行(即:其中一个li的宽度*li的总数即可)。
4. 31行代码:此步骤用于复制多的一份ul中的图片,让它以8张图片进行滚动。
5. 36行代码:if语句判断,当图片向左滚动,剩下的长度小于ul的总宽度的一半时,让ul的left值设置为0px(即:让第一张图片回到第八张图片的后面,然后依次可以进行循环操作,这个方法是让计算机自动完成的,执行速度很快)
其中,以上代码灵活运用了offsetWidth和offsetLeft的方法,即分别获取元素宽度和元素距离相对定位的左边间距;很好的诠释了无缝滚动图片的操作效果。
原文地址:https://www.cnblogs.com/ytraister/p/10828393.html