javascript运动的详细说明

物体运动原理：通过改变物体的位置，它就运动和变化。

方法：

1.对移动物体使用绝对定位；2.通过更改定位对象的属性(左、右、上、下)使对象移动。例如，offsetLeft(offsetRight)可用于控制左右移动。

步骤：

1.在开始移动之前，清除现有的计时器(因为连续点击按钮，对象会移动得越来越快，造成移动混乱)；2.启动计时器，计算速度；3.将运动与停止(if/else)分开，判断停止条件，并执行运动

一.计时器

在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)关闭循环定时器。

二.体育研究

1.移动：以恒定的速度移动(使物体移动)

计时器的使用为DIV增加了绝对定位偏移

问题：解决达到某一位的问题：做个判断，满足条件时关闭定时器(保存定时器定时器)，速度会变慢(一般不固定时间，而是改变数速)，使用可变存储速度

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

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

问题：连续点击会使速度更快。理由：每次点击都会启动定时器。当你点击几次，几个计时器将同时工作。确保一次只有一个计时器工作，首先是计时器()

实施例1，

！doctype html townleta charset=' utf-8 ' title shared to/title style # div 1 { width :150 px；高度：200 px；背景：绿色；位置：绝对；left :-150 px；} # div 1 span { position : absolute；宽度：20 px；高度：60 px；线高：20 px；背景：蓝色；right :-20px；top:70px}/style script window . onload=function(){ var oDiv=document . getelementbyid(' div 1 ')；odiv . onmouseover=function(){ startMove(0)；};odiv . onmouseout=function(){ startMove(-150)；};};var计时器=null函数startMove(iTarget){ var oDiv=document . getelementbyid(' div 1 ')；clearInterval(计时器)；timer=setInterval(function(){ var speed=0；if(odiv . offsetleftarget){ speed=-10；} else { speed=10} if(odiv . offsetleft==iTarget){ clearInterval(计时器)；} else { Odiv . style . left=Odiv . offsetleft speed ' px '；} }, 30);}/script/head 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效果如下：

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

判断var cur=0if (attr=='不透明度){cur=parseFloat (getStyle (obj，attr)) *100}else{}设置样式判断if(attr=='不透明度'){ obj。风格。fiiter=' alpha(不透明度3360 '(当前速度)')' obj。风格。不透明度=(当前速度)/100 }否则{ } 5 .链式运动

多出来的一个参数，只有传进去的时候才调用鼠标移入变宽，结束之后弹出字母表先横向展开。再以向展开鼠标移出，先变回不透明，变矮，变窄

三。封装运动框架（源码下载：https://github。com/Jing鲸/js move/blob/master/move。js)

基于以上的分析与总结，封装运动框架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)。

四。应用应用

1,完成如下效果：

射流研究…代码如下：

脚本src=' http : move。js '/脚本脚本窗口。onload=function(){ var Odiv=document。getelementbyid(' play ')；var aBtn=Odiv。GetElementsBytagname(' ol ')[0].getElementsByTagName(' Li ')；var OUl=Odiv。GetElementsBytagname(' ul ')[0]；var now=0；for(var I=0；iaBtn.lengthi ) { aBtn[i].索引=我；aBtn[i].onclick=function(){ now=this。指数；tab()；};} function tab(){ for(var I=0；iaBtn.lengthi ) { aBtn[i].className=} ABtn[现在]。 activestartMove(oUl，{ top :-150 * now })；}函数next(){ now；if(now==ABtn。长度){ now=0；} tab()；} var timer=setInterval(next，2000)；奥迪夫。onmouseover=function(){ clearInterval(定时器);};奥迪夫。onmouseout=function(){ timer=setInterval(next，2000)；};};/script应用2,完成如下效果：

代码如下：

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8' /title无标题文档/titlestyle type='text/css './style脚本类型=' text/JavaScript ' src=' http : move。js '/script脚本类型=' text/JavaScript '窗口。onload=function(){ var OBtn=document。getelementbyid(' but ')；var obotom=文档。getelementbyid(' ZNs _ bottom ')；var oBox=document。getelementbyid(' ZNs _ box ')；var oBtnClose=document。getelementbyid(' BTN _ close ')；obox。风格。display=' blockvar initBottomRight=parsent(getStyle(obo Tom，' right '))；var initbox bottom=parsent(getStyle(oBox，' bottom '))；obox。风格。显示='无'；obtn . onclick=openhandlerobtnclose . onclick=closeHandler函数openHandler(){ startMove(obotom，right: 0 }，函数(){ obox。风格。display=' blockstartMove(oBox，{ bottom : { 0 })；});obtn . class name=' but _ hideobn . onclick=closeHandler }函数closeHandler(){ startMove(oBox，{bottom: initBoxBottom}，function(){ oBox。风格。显示='无'；startMove(obotom，{right: initBottomRight}，function(){ obtn。类名=' but _ show});});oBtn.onclick=openHandler } }/脚本/流浆池./body/html源码下载：https://github。com/Jing鲸/js move

以上所述就是本文的全部内容了，希望大家能够喜欢。