JS中偏移和均匀动画的详细说明

时间：2021-09-01 来源：互联网编辑：宝哥软件园浏览：次

offset简介

我们知道，这三个系列包括：偏移/滚动/客户端。今天，我们来谈谈偏移量及其相关的统一动画。

偏移的中文意思是：偏移、补偿和位移。

在js中，有一种方便的方法可以得到元素的尺寸，即偏置族。偏移系列包括：

offsetwith offsetthighofsetleft offset top offset parent将在下面单独介绍。

1.偏置和偏置右侧

用于检测框本身的宽度和高度填充边框，不包括边距。如下所示：

offsetWidth=填充边框的宽度；

offsetHeight=高度填充边框；

这两个属性绑定到所有节点元素。得到之后，我们可以通过调用这两个属性得到元素节点的宽度和高度。

例子如下：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title style div { width : 100px；高度： 100像素；padding: 10pxborder: 10px固体# 000；margin: 100px背景-颜色：粉色；}/style/head dydiv class=' box '/div script var div 1=document . getelementsbytagname(' div ')[0]；console . log(div 1 . offset theight)；//打印结果：140 (100 20 20) console.log(类型为div 1 . offset theight)；//打印结果：数字/脚本/正文/html2、offsetLeft和offsetTop

返回上级框左侧位置(带定位)；如果父母都不在，以身体为准。

OffsetLeft:从父亲的填充开始计数，而不是父亲的边框。

示例：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title style . box 1 { width : 300 px；height: 300pxpadding: 100pxmargin: 100px相对位置：border: 100px固体# 000；背景-颜色：粉色；} . box 2 { width : 100 px；高度： 100像素；背景-颜色：红色；/*position:绝对值；*//* left : 10px；*//* top : 10px；*/}/style/head dydiv class=' box 1 ' div class=' box 2 '/div/div script var box 2=document . getelementsbyclassname(' box 2 ')[0]；//offsetTop和offsetleftconsole . log(box 2 . offsetleft)；//100 console . log(box 2 . style . left)；//10px/script/body/offsetLeft==style . left(移除px后)当父框被定位时。请注意，后者只识别内联样式。但区别不止于此，后面会解释。

3、偏移父级

检测定位在父框中的父框节点。返回的结果是对象的父对象(带有定位)。

如果当前元素的父元素没有CSS定位(位置是绝对的、相对的、固定的)，那么offsetParent的返回结果就是body。

如果当前元素的父元素有CSS定位(位置是绝对的、相对的、固定的)，那么offsetParent的返回结果就是最近的父元素。

示例：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title/headsdydiv class=' box1 ' div class=' box2 ' div class=' box3 '/div/div script//offset parent:在审阅框中有定位的框//在审阅框中没有定位，返回body //如果有，谁返回了最新的varbox3=document . getelementsbyclassname(' box3 '[0])；console . log(box 3 . offsetparent)；/脚本/正文/html打印结果：

offsetLeft和style.left之间的区别

(1)最大的区别在于：

OffsetLeft可以将位置返回到距离的左侧，即盒子不在的位置。如果母框没有定位，以正文为准。

Style.left只能获取内联样式，否则返回' '(意思是返回null)；

(2)offsetTop返回一个数字，而style.top返回一个带有单位px的字符串。

例如：

div.offsetLeft=100div . style . left=' 100px '；(3)offsetLeft和offsetTop是只读的，而style.left和style.top可以读写(只读是获取值，可写是赋值)

(4)如果没有为HTML元素指定顶部样式，style.top将返回一个空字符串。

总结：我们一般的做法是使用offsetLeft和offsetTop获取值，使用style.left和style.top赋值(比较方便)。原因如下：

Style.left:只能得到内联表达式，得到的值可能为空，容易出现NaN。

OffsetLeft:取值非常方便，是现成的数字，方便计算。它是只读的，无法分配。

动画类型

Flash(基本没用)匀速(本文重点)慢动作(后续重点)简单例子如下：(每500ms，向右移动方块100px)

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title style div { width : 100px；高度： 100像素；背景-颜色：粉色；绝对位置：}/style/header dybutton动画/button div class=' box '/div script varb TN=document . getelementsbytagname(' button ')[0]；var div=document . getelementsbytagname(' div ')[0]；//1，闪烁//BTN . onclick=function(){//div . style . left=' 500 px '；//} //2、匀速移动btn.onclick=function () {//timer，向右移动一些set interval(function(){ console . log(par sent(div。style.left))定期；//动画原理：盒子的未来位置=盒子的当前位置步长；//使用style.left赋值，offsetLeft获取值。div . style . left=div . offsetleft 100 ' px '；//div . style . left=ParSeint(div . style . left)10 ' px '；//不能使用NaN，500)；}/script/body/html具有以下效果：

统一动画包：每30毫秒移动盒子10px重要]

代码如下：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title style . box 1 { margin : 0；padding: 5pxheight: 300px背景色： # DDD；相对位置：}按钮{ margin: 5px} . box 2 { width : 100 px；高度： 100像素；背景-颜色：红色；绝对位置：left: 195pxtop: 40px} . box 3 { width : 100 px；高度： 100像素；背景-颜色：黄色；绝对位置：left : 0；top: 150px}/style/head dydiv class=' box 1 '按钮向左移动=200px/button按钮向左移动=400 px/button div class=' box 2 '/div class=' box 3 '/div/div script var btnarr=document . getelementsbyname(' button ')；var box 2=document . getelementsbyclassname(' box 2 ')[0]；var box 3=document . getelementsbyclassname(' box 3 ')[0]；//绑定事件btnarr [0]。onclick=function(){//如果有一天我们要传递另一个盒子，那么我们的方法就不行了。//所以我们需要添加第二个参数，移动的盒子本身。动画(方框2，200)；动画(box3，200)；} btnArr[1]。onclick=function(){ animate(box 2，400)；动画(盒子3，400)；}//[重要]方法包：通过10px函数Animate (Ele，Target)每30毫秒向右移动一次方块{//要使用计时器，请先清除计时器。//一个盒子只能有一个定时器，这样就不会和其他盒子有定时器冲突。//我们可以将计时器本身视为盒子的属性clearInterval(ele.timer)。//我们要求盒子既可以向前也可以向后，所以我们的步长必须是正的或者负的。//如果目标值大于当前值，取正值，如果目标值小于当前值，取负值var speed=targeteleme . offsetleft？10 : -10;//速度是指步长ele。timer=set interval(function(){//在执行前获取当前值与目标值的差值var val=target-ele . offsetleft；ele.style.left=ele.offsetLeft速度' px '；//在移动过程中，如果目标值与当前值的差值小于步长，则不能向前移动。//因为步长是正的或负的，所以都转换成绝对值来比较if (math。数学。防抱死制动系统(速度))。风格。left=目标“px”；clearInterval(ele . timer)；} }，30)}/脚本/正文/html:

请记住，上面代码中的方法封装可以用作模板步骤。事实上，这种封装的方法，编写如下，会更严谨，更容易理解：(如果语句得到改进)

//[重要]方法包：每隔30毫秒，通过10px函数Animate (Ele，Target)向右移动方块{//要使用计时器，请先清除计时器。//一个盒子只能有一个定时器，这样就不会和其他盒子有定时器冲突。//我们可以把定时器本身看作是盒子的一个属性clearInterval(ele.timer)。//我们要求盒子既可以向前也可以向后，所以我们的步长必须是正的或者负的。//如果目标值大于当前值，取正值，如果目标值小于当前值，取负值var speed=targeteleme . offsetleft？10 : -10;//速度是指步长ele。timer=set interval(function(){//在执行前获取当前值与目标值的差值var val=target-ele . offsetleft；//在移动过程中，如果目标值与当前值的差值小于步长，则不能向前移动。//因为步长为正或负，所以都转换成绝对值来比较IF (Math。数学。ABS(Speed)){//如果Val小于步长，则直接到达目的地；否则，一次移动一步：ele . style . left=target ' px '；clearInterval(ele . timer)；} else { ele . style . left=ele . offsetleft speed ' px '；} }，30)}代码示例：转盘图的实现

代码完整版本如下：(注已详细说明)

！doctype html html lang=' en ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title无标题文档/title style type=' text/CSS ' * { padd : 0；保证金： 0；列表样式：无；边框： 0；} .所有{宽度： 500像素高度： 200像素；padding: 7pxborder: 1px固体# cccmargin: 100px自动；相对位置：} .屏幕{宽度： 500像素高度： 200像素；飞越：隐藏；相对位置：} .屏幕li {宽度： 500像素高度： 200像素；飞越：隐藏；向左浮动：} .屏幕ul {位置：绝对值；左： 0；top: 0px宽度： 3000 px} .所有ol { position:绝对值；右： 10pxbottom: 10px线高： 20px文本对齐：中心；} .所有ol li { float:左侧；宽度： 20px高度： 20像素背景# fffborder: 1px固体# ccc左边距left: 10pxcursor:指针；} .李。当前{背景：黄色；} # arr { display : none } # arr span { width : 40px高度： 40px绝对位置：left : 5 xtop : 50%；边距-top :-20px；背景技术： # 000;光标：指针；线高： 40px文本对齐：中心；字体粗细：粗体；字体系列： '黑体；font-size : 30pxcolor : # fffopacity : 0.3 border : 1px实心# fff} # arr #右{ right: 5pxleft:汽车；}/样式脚本window.onload=function () { //需求：无缝滚动。 //思路：赋值第一张图片放到保险商实验所的最后，然后当图片切换到第五张的时候//直接切换第六章，再次从第一张切换到第二张的时候先瞬间切换到//第一张图片，然后滑动到第二张//步骤： //1.获取事件源及相关元素。(老三步) //2.复制第一张图片所在的李，添加到保险商实验所的最后面。 //3.给开环（同开环)中添加礼券列表中的个数-1个，并点亮第一个按钮。 //4.鼠标放到开环（同开环)的里上切换图片//5.添加定时器//6.左右切换图片（鼠标放上去隐藏，移开显示) //1.获取事件源及相关元素。(老三步)var all=文档。getelementbyid(' all ')；var屏幕=全部。first elementchild | | all。第一个孩子；var imgWidth=屏幕。偏移；var ul=屏幕。第一个元素子| |屏幕。第一个孩子；var ol=屏幕。孩子[1]；var div=屏幕。LastElementChild | |屏幕。LastChilddiv.children//2.复制第一张图片所在的李，添加到保险商实验所的最后面var NyWLi=ul。儿童[0].克隆代码（真);ul。append child(NyWLi)；//3.给开环（同开环)中添加礼券列表中的个数-1个，并点亮第一个按钮。

for(var I=0；我明白了。孩子们。长度-1；I){ var olNewLi=document。创建元素(“李”)；奥尔纽利。innerhtml=I ^ 1；ol。append child(olNewLi)} var olli arr=ol。儿童；奥利亚尔[0].当前//4 .鼠标放到开环（同开环)的里上切换图片for(var I=0；I OliArr . lentigi){//自定义属性，把索引值绑定到元素的指数属性上奥利哈尔[i].索引=我；奥利哈尔[i].onmouseover=function () { //排他思想for(var j=0；奥利阿勒。长度；j){ OliArr[j].class NAmE=} this . class NAmE=' current//鼠标放到小的方块上的时候索引值和键以及平方同步//key=this。指数；//平方=this . indexkey=square=this.index//移动盒子动画(ul，-这个。index * IMgwidth)；} } //5.添加定时器var timer=setInterval(自动播放，1000);//固定向右切换图片//两个定时器（一个记录图片，一个记录小方块)var key=0；var square=0；函数autoPlay() { //通过控制键的自增来模拟图片的索引值，然后移动保险商实验所密钥；if (key olLiArr.length) { //图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张ul。风格。left=0；key=1；} animate(ul，-key * IMgwidth)；//通过控制平方的自增来模拟小方块的索引值，然后点亮盒子//排他思想做小方块正方形；if (square olLiArr.length - 1) {//索引值不能大于等于5,如果等于5,立刻变为0;平方=0;} for(var I=0；奥利哈尔(纵向).奥林匹克广场.className=' current} //鼠标放上去清除定时器，移开后在开启定时器全部。onmouseover=function(){ div。风格。display=' blockclearInterval(计时器);}全部。onmouseout=function(){ div。风格。显示='无'；定时器=setInterval(自动播放，1000);} //6.左右切换图片（鼠标放上去显示，移开隐藏)spanArr[0]。onclick=function () { //通过控制键的自增来模拟图片的索引值，然后移动保险商实验所密钥-;如果(键0) { //先移动到最后一张，然后键的值取之前一张的索引值，然后在向前移动ul。风格。left=-imgWidth *(olli arr)。长度)' px '；key=olli arr。长度-1；} animate(ul，-key * IMgwidth)；//通过控制平方的自增来模拟小方块的索引值，然后点亮盒子//排他思想做小方块正方形；如果(平方0) {//索引值不能大于等于5,如果等于5,立刻变为0;square=OliArr。长度-1；} for(var I=0；奥利哈尔(纵向).奥林匹克广场.当前的spanArr[1].onclick=function () { //右侧的和定时器一模一样autoPlay()；}函数animate(ele，target){ clearInterval(ele。计时器)；var speed=target ele.offsetLeft？10 : -10;埃勒。timer=SetInterval(function(){ var val=target-ele。offsetleftele.style.left=ele.offsetLeft速度px '；if(数学。数学。防抱死制动系统(速度))。风格。left=target ' pxclearInterval(ele。计时器)；} }，10)} }/script/headdydiv class=' all ' id=' all ' div class=' screen ' ul liimg src=' http : images/1。jpg '/Li liimg src=' http : images/2。jpg '/Li liimg src=' http : images/3。jpg '/Li liimg src=' http : images/4。jpg '/Li liimg src='实现效果：