JS运动分析

物体运动原理：通过改变物体的位置，它就运动和变化。任何运动都是相对的，就像物理学中的运动公式：s(待实现)=s0(当前模式值)vt。

方法：1 .对运动物体使用绝对定位；2.通过更改定位对象的属性(左、右、上、下)来移动对象。例如，offsetLeft(offsetRight)可用于控制左右移动。步骤：1。在开始移动之前，清除现有的计时器(因为连续点击按钮，对象会移动得越来越快，造成移动混乱)；2.启动计时器，计算速度；3.将运动与停止(if/else)分开，判断停止条件，并执行运动。

要点：

1.多个对象。

将计时器连接到对象2。链条运动。

调用循环定时器：在fnEnd函数中启动另一个定时器。3.多值运动。

循环属性值数组：一个定时器时间，执行多个属性值变化判断移动结束，所有属性达到预设值：加一个布尔标志，开头var bStop=true//假设：所有值都到了；在循环时，如果如果(cur！=JSON[attr])bStop=false；

一、定时器在javascritp中，关于定时器有两个特殊的功能，分别是：1。倒计时定时器：time name=setTimeout(' function()；'。delay time)；2.循环计时器：time name=SetInterval(' function()；'，delay time)；Function()是一个在计时器被触发时执行事件的函数。它可以是一个函数、几个函数或javascript语句。分开；Delaytime是以毫秒为单位的间隔时间。倒计时计时器是在指定时间后触发的事件，而循环计时器是间隔时间到来时重复触发的事件。区别在于前者只作用一次，后者持续作用。当页面只需要触发一次时，通常使用倒计时定时器。例如，单击一个按钮后，页面会在一定时间后跳转到相应的站点。它也可以用来判断一个观众是否是你网站上的“老客人”。如果没有，可以在5秒或者10秒后跳转到对应的站点，然后告诉他可以晚点回来，在某个地方按一个按钮快速进入。循环计时器一般用于需要在网站上重复执行的效果，如javascript滚动条或状态栏，也可以用飞雪图片表示页面背景。这些事件需要定期运行。有时候，我们想取消一些计时器。此时，我们可以使用clearTimeout(timename)来关闭倒计时计时器，使用clearInterval(timename)来关闭循环计时器。

2.运动研究1。运动：匀速运动(让物体运动)计时器的使用增加了绝对定位偏移到DIV。

问题：当停止标志达到特定位时，可以解决：作出判断，当条件满足时，关闭定时器(保存定时器)，速度变慢(一般时间不固定，但数-速有变化)，使用可变存储速度。

问题：取7时，offsetLeft不等于300时，div不能停解：=300 //停在301。

问题：300后，点击按钮继续行走。原因：点击按钮，执行函数，启动定时器(至少执行当前函数一次)，求解： plus else(到达目标前执行)。

问题：连续点击会使速度更快。原因：每次点击，都会启动定时器。几次点击后，几个计时器将同时工作。要确保一次只有一个计时器工作，请先调用计时器()。

示例1，分享给：

！DOCTYPE HTMl HTMl ToolHeeta charset=' utf-8 '标题分享到/title style # div 1 { width :150 px；高度：200 px背景：绿色；位置：绝对；左侧：-150像素；} # div 1 span {位置：绝对值；宽度：20 px高度：60 px线高：20 px背景：蓝色；右侧：-20px；top:70px}/style脚本窗口。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；奥迪夫。onmouseover=function(){ startMove(0)；};奥迪夫。onmouseout=function(){ startMove(-150)；};};定义变量计时器=null函数start move(iTarget){ var Odiv=document。getelementbyid(' div 1 ')；clearInterval(计时器);timer=setInterval(function(){ var speed=0；if(odiv。offsetlefttarget){ speed=-10；} else { speed=10} if(odiv。offsetleft==iTarget){ clearInterval(计时器);} else { Odiv。风格。左=Odiv。偏移速度“px”；} }, 30);}/脚本/标题dydiv id=' div 1 ' span分享到/span/div/body/html效果如下：

示例2,淡入淡出：

！DOCTYPE HTMl HTMl ToolHeeta charset=' utf-8 '标题淡入淡出/title style # div 1 { width :200 px；高度：200 px背景：红色；滤镜： alpha(opa city 336030)；opa city 33600.3 }/style脚本窗口。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；奥迪夫。onmouseover=function(){ startMove(100)；};奥迪夫。onmouseout=function(){ startMove(30)；};};var=30；定义变量计时器=null函数start move(iTarget){ var Odiv=document。getelementbyid(' div 1 ')；clearInterval(计时器);timer=setInterval(function(){ var speed=0；if(AlphaItarget){ speed=10；} else { speed=-10；} if(alpha==iTarget){ clearInterval(计时器);} else { alpha=速度；奥迪夫。风格。filter=' alpha(opa city 3360 ' alpha ')'；奥迪夫。风格。不透明度=alpha/100；} }, 30);}/script/head dydiv id=' div 1 '/div/body/html效果如下：

匀速运动的停止条件距离足够近

示例3,匀速运动的停止条件：

！DOCTYPE HTMl HTMl ToolHeeta charset=' utf-8 '标题匀速运动的停止条件/title style # div 1 { width :100 px；高度：100 px背景：红色；位置：绝对；left :600 pxtop :50 px } # div 2 { width :1 px高度：300 px位置：绝对；左侧：300pxtop:0背景：黑色；} # div3 { width:1px高度：300 px位置：绝对；左侧：100pxtop:0背景：黑色；}/stylescriptvar timer=null；函数start move(iTarget){ var Odiv=document。getelementbyid(' div 1 ')；clearInterval(计时器);timer=setInterval(function(){ var speed=0；if(odiv。offsetlefttarget){ speed=7；} else { speed=-7；} if(数学。ABS(itar get-Odiv。offsetleft)=7){ clearInterval(定时器);奥迪夫。风格。left=itar get ' px} else { Odiv。风格。左=Odiv。偏移速度“px”；} }, 30);}/script/head dyinput type=' button ' value='到100 ' onclick=' startMove(100)'/input type=' button ' value='到300 ' onclick=' startMove(300)'/div id=' div 1 '/div div id=' div 2 '/div div id=' div 3 '/div/body/html 2 .变速运动（缓冲运动)逐渐变慢，最后停止距离越远速度越大速度有距离决定速度=(目标值-当前值)/缩放系数如果没有缩放系数t速度太大，瞬间到达终点。没有过程

问题：并没有真正到达300原因：速度只剩0.9 //像素是屏幕能够显示的最/J库位，并不会四舍五入掉Math.ceil()向上取整Math.floor()向下取整

问题：向左走，又差一块-数学。地板()判断：三目速度=速度0?数学天花板（速度)

示例，缓冲运动：

！DOCTYPE HTMl HTMl ToolHeeta charset=' utf-8 '标题缓冲运动/title style # div 1 { width :100 px；高度：100 px背景：红色；位置：绝对；left :600 pxtop :50 px } # div 2 { width :1 px高度：300 px位置：绝对；左侧：300pxtop:0背景：黑色；}/style脚本函数startMove(){ var oDiv=document。getelementbyid(' div 1 ')；setInterval(function(){ var speed=(300-odiv。offset left)/10；速度=速度0?Math.ceil(速度):路径。地板(速度);奥迪夫。风格。左=odiv。偏移速度px '；document.title=oDiv.offsetLeft '，' speed}，30)；}/script/head dyinput type=' button ' value='开始运动onclick=' startMove()'/div id=' div 1 '/div div id=' div 2 '/div/body/html效果如下：

3.多物体运动多个div，鼠标移入变宽运动框架传参obj，知道让哪个物体动起来用到缓冲一定要取整

问题：div没运动回去//清除前一个定时器原因：只有一个定时器解决：加物体上的定时器，使每个物体都有一个定时器。定时器作为物体属性

多个差异淡入淡出首先关闭物体上的定时器经验：多物体运动框架所有东西都不能共用

问题：不是因为定时器，而是因为希腊字母的第一个字母解决：作为属性附加到物体上/不以变量形式存在

抵消的病菌

加边界变宽

在中间并不是真正的宽度，它获取的是盒模型尺寸解决：躲着宽度扔到行间，parselnt (oDiv.style.width)

进一步解决：getStyle (obj，name ) currentStyle，getComputedStyle加边界，只要抵消就有问题去掉抵消

示例，多物体运动：

！DOCTYPE HTMl HTMl ToolHeeta charset=' utf-8 '标题无标题文档/title style div { width :100 px；高度：50 px背景：红色；margin :10 pxborder 336010 px纯黑；}/stylescriptwindow。onload=function(){ var ADiv=document。getelementsbytagname(' div ')；for(var I=0；iaDiv.lengthi ) { aDiv[i].定时器=nullaDiv[i].onmouseover=function(){ startMove(this，400)；};aDiv[i].onmouseout=function(){ startMove(this，100)；};}};函数startMove(obj，itar get){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var speed=(itar get-obj。offset withts)/6；速度=速度0?Math.ceil(速度):路径。地板(速度);如果。offsetdth==itar get){ clearInterval(obj。计时器)；} else { obj。风格。宽度=obj。速度为“px”时的偏移；} }, 30);}/脚本/标题dydiv/div/div/div/div/正文/html效果如下：

4.任意值运动任意值运动的单位分为透明度和px。

像素单位的任意值

！DOCTYPE HTMl HTMl ToolHeeta charset=' utf-8 '标题无标题文档/title style div { width :200 px；高度：200 px余量：20pxfloat:left背景：黄色；border:10px纯黑；font-size :14 px}/style脚本窗口。onload=function(){ var ODI v1=document。getelementbyid(' div 1 ')；ODI v1。onmouseover=function(){ startMove(这个，‘高度’，400)；};ODI v1。onmouseout=function(){ start move(这个，‘高度’，200)；};var ODI v2=文档。getelementbyid(' div 2 ')；ODI v2。onmouseover=function(){ startMove(this，' width '，400)；};ODI v2。onmouseout=function(){ startMove(this，' width '，200)；};var ODI v3=文档。getelementbyid(' div 3 ')；odiv 3。onmouseover=function(){ startMove(this，' fontSize '，50)；};odiv 3。onmouseout=function(){ startMove(this，' fontSize '，14)；};var odiv 4=文档。getelementbyid(' div 4 ')；odiv 4。onmouseover=function(){ startMove(this，' borderWidth '，100)；};odiv 4。onmouseout=function(){ startMove(this，' borderWidth '，10)；};};函数getStyle(obj，name){ if(obj。currentstyle){ return obj。current style[name]；} else { return getComputedStyle(obj，false)[name]；} }函数startMove(obj，attr，iTarget){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var cur=parsent(getStyle(obj，attr))；var speed=(iTarget-cur)/6；速度=速度0?Math.ceil(速度):路径。地板(速度);if(cur==itar get){ clearInterval(obj。计时器)；} else { obj。style[attr]=cur速度' px '；} }, 30);}/script/head dydiv id=' div 1 '变高/divdiv id='div2 '变宽/div div id=' div 3 ' safasfasd/div div id=' div 4 '/div/body/html效果如下：

！DOCTYPE HTMl HTMl ToolHeeta charset=' utf-8 '标题无标题文档/title style div { width :200 px；高度：200 px余量：20pxfloat:left背景：黄色；border:10px纯黑；font-size :14 px}/style脚本窗口。onload=function(){ var ODI v1=document。getelementbyid(' div 1 ')；ODI v1。onmouseover=function(){ startMove(这个，‘高度’，400)；};ODI v1。onmouseout=function(){ start move(这个，‘高度’，200)；};var ODI v2=文档。getelementbyid(' div 2 ')；ODI v2。onmouseover=function(){ startMove(this，' width '，400)；};ODI v2。onmouseout=function(){ startMove(this，' width '，200)；};var ODI v3=文档。getelementbyid(' div 3 ')；odiv 3。onmouseover=function(){ startMove(this，' fontSize '，50)；};odiv 3。onmouseout=function(){ startMove(this，' fontSize '，14)；};var odiv 4=文档。getelementbyid(' div 4 ')；odiv 4。onmouseover=function(){ startMove(this，' borderWidth '，100)；};odiv 4。onmouseout=function(){ startMove(this，' borderWidth '，10)；};};函数getStyle(obj，name){ if(obj。currentstyle){ return obj。current style[name]；} else { return getComputedStyle(obj，false)[name]；} }函数startMove(obj，attr，iTarget){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var cur=parsent(getStyle(obj，attr))；var speed=(iTarget-cur)/6；速度=速度0?Math.ceil(速度):路径。地板(速度);if(cur==itar get){ clearInterval(obj。计时器)；} else { obj。style[attr]=cur速度' px '；}}, 30);}/script/head dydiv id=' div 1 '变高/divdiv id='div2 '变宽/div div id=' div 3 ' safasfasd/div div id=' div 4 '/div/body/html

效果如下：

透明度的任意值，需要做判断：

判断var cur=0if (attr=='不透明度){cur=parseFloat (getStyle (obj，attr)) *100}else{}设置样式判断if(attr=='不透明度'){ obj。风格。fiiter=' alpha(不透明度3360 '(当前速度)')' obj。风格。不透明度=(当前速度)/100 }否则{ } 5 .链式运动多出来的一个参数，只有传进去的时候才调用鼠标移入变宽，结束之后弹出字母表先横向展开。再以向展开鼠标移出，先变回不透明，变矮，变窄

三。封装运动框架

基于以上的分析与总结，封装运动框架move.js如下：

函数getStyle(obj，name){ if(obj。currentstyle){ return obj。current style[name]；} else { return getComputedStyle(obj，false)[name]；} }函数startMove(obj，json，fnEnd){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var bStop=true；//假设：所有值都已经到了for(JSON中的var attr){ var cur=0；if(attr=='不透明度){ cur=数学。round(parseFloat(getStyle(obj，attr))* 100)；} else { cur=ParSeint(GetStyle(obj，attr))；} var speed=(JSON[attr]-cur)/6；速度=速度0?Math.ceil(速度):路径。地板(速度);if(cur！=JSON[attr])bStop=false；if(attr=='不透明度){ obj。风格。filter=' alpha(opa city 3360 '(cur speed)')'；obj.style .不透明度=(cur速度)/100;} else { obj。style[attr]=cur速度' px '；} } if(bStop){ clearInterval(obj。计时器)；if(Fnend)Fnend()；} }, 30);}move.js运动框架基本满足现在网页上所有动画的需求（不包括css3)。

以上就是本文的全部内容，希望对大家的学习有所帮助。