offsetWidth与offsetLeft用法之无缝滚动

知识讲解:

(1)offsetWidth是什么?

  答:它可以获取物体宽度的数值;offsetWidth实际获取的是盒模型(width+border + padding)的宽度。

    如图:

    offsetWidth与offsetLeft用法之无缝滚动

(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行)

 

案例:无缝滚动图片

offsetWidth与offsetLeft用法之无缝滚动

//css代码如上

offsetWidth与offsetLeft用法之无缝滚动

 以上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(即:让第一张图片回到第八张图片的后面,然后依次可以进行循环操作,这个方法是让计算机自动完成的,执行速度很快)

其中,以上代码灵活运用了offsetWidthoffsetLeft的方法,即分别获取元素宽度和元素距离相对定位的左边间距;很好的诠释了无缝滚动图片的操作效果。

上一篇:2 获取元素在页面中的位置


下一篇:二、视口 布局视口 视觉视口 理想视口