** javascript从入门到跑路-----小文的js学习笔记（1）---------script、alert、document。write() 和 console.log 标签
javascript从入门到跑路-----小文的js学习笔记（2）--------- 语法构成、关键字和保留字、变量
javascript从入门到跑路-----小文的js学习笔记（3）---------javascript中的几种数据类型 … … javascript从入门到跑路-----小文的js学习笔记目录 **
关注我，我们一起学习进步。
运动框架可以类似于动画效果，让我们的元素动起来，然后视频上的学习是大致从 匀速运动、缓冲运动、多物体运动、链式运动等。
在说这些之前，先来回忆以下定时器的用法（详细请看javascript从入门到跑路-----小文的js学习笔记（9）------定时器以及图片轮播示例）
定时器的两种创建语法： 语法1： setinterval(函数，亳秒) 语法2： function 函数名（）{ 要执行的代码 }
setinterval(“函数名（）”，毫秒)
停止定时器的两种方法：clearTimeout(停止的定时器) 与 clearInterval(停止的定时器)
匀速运动，即朝着一个方向速度不变 一直保持着相同的速度进行运动即匀速运动
那么我们写一个盒子来进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> { margin: 0; padding: 0; } #box{ width: 200px; height: 200px; background-color: #32CD32; position: absolute; left: 0; top: 0; } </style> <body> <div id="box"></div> <script> var timer=null; function an(dom,target){ clearInterval(timer); timer = setInterval(function(){ if(dom.offsetLeft<target){ var speed=10; }else{ var speed = -10; } if(target==dom.offsetLeft){ clearInterval(timer) }else{ dom.style.left = dom.offsetLeft+speed+"px"; } },25) } var box = document.getElementById("box") box.onmouseover = function(){ an(box,500) } box.onmouseout = function(){ an(box,0) } </script> </body> </html>执行结果： 当我们鼠标移入盒子，盒子会向右移动，移出盒子则会向左移动至初始位置。 这便是我们的匀速运动 ，这里加入了两个鼠标的移入和移出事件 知识回顾javascript从入门到跑路-----小文的js学习笔记（15 — 2 ）--------鼠标类事件
当要即将到达终点的时候，速度会逐渐逐渐变慢，并最终变为0.
简单示例：同样是以盒子为例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> { margin: 0; padding: 0; } #box{ width: 200px; height: 200px; background-color: #32CD32; position: absolute; left: 0; top: 0; } </style> <body> <div id="box"></div> <script> var timer=null; function an(dom,target){ clearInterval(timer); timer = setInterval(function(){ var speed = (target-dom.offsetLeft)/20; if(speed>0){ speed = Math.ceil(speed) }else{ speed = Math.floor(speed) } if(target==dom.offsetLeft){ clearInterval(timer) }else{ dom.style.left = dom.offsetLeft+speed+"px"; } },25) } var box = document.getElementById("box") box.onmouseover = function(){ an(box,500) } box.onmouseout = function(){ an(box,0) } </script> </body> </html>执行结果：
多物体运动呢，可以理解为有多个盒子，都有自己的运动。
同样以盒子为例：创建三个盒子，当我们鼠标移入盒子变长，移出盒子恢复原样。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{margin:0;padding:0} ul li{ width:400px; height: 100px; background: greenyellow; margin-top:20px; } </style> <body> <ul> <li></li> <li></li> <li></li> </ul> <script> function animate(dom,target){ clearInterval(dom.timer); dom.timer = setInterval(function(){ var speed= (target-dom.offsetWidth)/10; speed = speed>0 ?Math.ceil(speed):Math.floor(speed); if(target == dom.offsetLeft){ //停止定时器 clearInterval(dom.timer); }else{ dom.style.width = dom.offsetWidth + speed +"px"; } },30) } var lis =document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].onmouseover = function(){ animate(this,600); } lis[i].onmouseout = function(){ animate(this,400); } } </script> </body> </html>执行结果：
链式运动你可以理解为执行完一段操作后，进行下一段操作，只有当上一段操作执行完毕之后，才会执行下一段操作。
我们同样以盒子运动为例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{margin:0;padding:0} #box{ width:100px; height: 100px; background: seagreen; position: absolute; left:0; top:0; opacity: 0.3; filter:alpha(opacity:30); } </style> <body> <div id="box"></div> <script src="script.js"></script> <script> //dom指DOM节点 target 指目标值 attr 指属性名称 fn 指回调函数 function animate(dom,target,attr,fn){ clearInterval(dom.timer); dom.timer = setInterval(function(){ if(attr=="opacity"){ var objAttr= parseFloat(getAttr(dom,attr))*100; }else{ var objAttr = parseInt(getAttr(dom,attr)); } var speed = (target-objAttr)/10; speed = speed>0 ?Math.ceil(speed):Math.floor(speed); if(target == objAttr){ //停止定时器 clearInterval(dom.timer); if(fn)fn(); }else{ if(attr=="opacity"){ dom.style.filter = "alpha(opacity:"+objAttr + speed+")"; dom.style[attr] = (objAttr + speed)/100; }else{ dom.style[attr] = objAttr + speed +"px"; } } },30) } function getAttr(dom,attr){ if(dom.currentStyle){ return dom.currentStyle[attr]; }else{ return getComputedStyle(dom,null)[attr]; } } var box =document.getElementById("box"); box.onmouseover = function(){ animate(box,700,"left",function(){ animate(box,500,"top",function(){ animate(box,0,"left",function(){ animate(box,0,"top") }) }); }); } </script> </body> </html>执行结果：这里你可以看出我们的这个盒子当向右移动到指定位置，即上一段动作向右移动完成结束，才开始下一段动作向下移，当完成向下移动 再向左移，同样完成当作之后再向上移动， ** 关注校园君有话说 公众号 ，回复 web前端 免费领取50G 学习资料 一份 ，我们一起学习进步吧。
