offsetWidth与offsetLeft用法之无缝滚动

知识讲解:

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

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

原文地址:https://www.cnblogs.com/ytraister/p/10828393.html

时间: 2024-10-20 02:28:05

offsetWidth与offsetLeft用法之无缝滚动的相关文章

JS实现图片无缝滚动特效;附addEventListener()方法、offsetLeft和offsetWidth属性。

一:html部分 <body> <input id="btn1" type="button" value="向左"> <input id="btn2" type="button" value="向右"> <div id="div1">/*外框,显示区域*/ <ul id="ul1">/*循

JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee direct

js从右向左无缝滚动原理

今天公司的首页新增一个公告需求,类似于如下这段代码的效果,做完以后仔细思考了一下其中的原理 在说原理之前建议先看看我上一篇 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解 这篇文章,里面例图即视化的解释了各种定位的不同,以及在各浏览器下不同的解析结果. 不敲太多的文字,直接上代码,干货都在注释里 <!DOCTYPE html> <head> <meta http-equiv="Content-

JS-特效 ~ 01. 事件对象、offset偏移/检测、无缝滚动、自动循环轮播图

Math.round ( ) :正书四舍五入,负数五舍六入 用定时器,先清除定时器 事件对象 event event:事件被触动时,鼠标和键盘的状态,通过属性控制 Offset:偏移,检测 1. 获取元素尺寸 2. 检测盒子的宽高     事件源.offsetLeft. /. ele.offsetWidth /返回的数值没有单位,是number类型 /包括内边距.边框,不包括外边距 3. 获取定位的元素的left和top值  offsetLeft / offsetTop 如果被获取的元素没有定位

【JS学习】无缝滚动

一.无缝滚动--基础 效果演示 物体运动基础 让Div移动起来 offsetLeft的作用,可以想到有offsetLeft就会有offsetRight,还会有offsetWight/offsetHeight 用定时器让物体连续移动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

JavaScript学习笔记5 之 计时器 &amp; scroll、offset、client系列属性 &amp; 图片无缝滚动

一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行一次相应的函数(不重复) 清除计时器: clearInterval( ); clearTimeout( ); 当计时器调用执行完毕时,它将返回一个timer ID, 如果将该ID传递给clearInterval,便可以终止代码的执行. 实例: 页面布局: <div id="wrap"

js图片无缝滚动代码

想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,

JavaScript(六)——实现图片上下或者左右无缝滚动

/*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};return v.each(e.split(y),function(e,n){t[n]=!0}),t}function H(e,n,r){if(r===t&&e.nodeType===1){var i="data-"+n.replace(P,"-$1").toL

javascript实现图片无缝滚动-------Day 27

今天感冒变严重了,鼻涕止不住啊,一卷卫生纸就这样报废了,还是不想吃药,熬熬总能熬过去吧,状态不是很好,看这么个小应用竟然看了很久的时间,到最后才像猛的明白了一样,而且查着好像有好几种做法的,今天先说说这种吧,比较好理解额. 所谓"图片无缝滚动",我们可以这样来理解,如果只用marquee,则需要尾部也离开容器了,头部才能从头部另一端出现,重新进行滚动,如是进行循环,而无缝滚动,就是说一种首尾相连的效果,头部是咬在尾部上的,尾部全部漏出来后,后面紧挨着显示头部的部分,这样首尾相连进行的滚