标签：
js实现的运动框架代码实例:
元素的运动效果在大量的场景中都有应用，最典型的一个就是网站的客服系统，一般都会随着滚动条运动，本章节就介绍一下js的一个运动框架实例，希望能够给需要的朋友带来借鉴作用。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #div1 { width:100px; height:100px; background:#0000FF; position:absolute; left:800px; top:100px; } #div200 { width:1px; height:400px; background:#FF0000; position:absolute; left:200px; } #div500 { width:1px; height:400px; background:#FF0000; position:absolute; left:500px; } </style> <script type="text/javascript"> var timer=null; function move(end) { var oDiv=document.getElementById(‘div1‘); clearInterval(timer); timer=setInterval(function(){ var speed=(end-oDiv.offsetLeft)/5; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(Math.abs(end-oDiv.offsetLeft)<=speed) { clearInterval(timer); oDiv.style.left=end+‘px‘; } else { oDiv.style.left=oDiv.offsetLeft+speed+‘px‘; } }, 30) } window.onload=function() { var bt1=document.getElementById("btn1"); var bt2=document.getElementById("btn2"); bt1.onclick=function(){move(500);} bt2.onclick=function(){move(200);} } </script> </head> <body> <input type="button" id="btn1" value="到500的位置" /> <input type="button" id="btn2" value="到200的位置" /> <div id="div1"></div> <div id="div200">200</div> <div id="div500">500</div> </body> </html>
以上代码实现了我们的要求，点击相应的按钮可以让div移动的指定的位置，下面通过代码注释详细介绍一下此效果的实现过程，希望能够对希望深入了解的朋友带来一定的帮助。
一.代码注释:
1.var timer=null，声明一个变量用来作为定时器函数setInterval()的返回值，这在停止定时器函数运行的时候非常关键。
2.function move(end) {}，此函数用来实现div的运动效果，参数规定要移动位置，在本代码中就是offsetLeft属性值。
3.var oDiv=document.getElementById(‘div1‘)，获取id属性值为div1的对象。
4.clearInterval(timer)，停止定时器函数的执行，这个很重要，否则可能造成多个定时器函数同时执行，造成混乱。
5.timer=setInterval(function(){}，30)，使用定时器函数每隔30毫秒执行一次匿名函数，定时器函数的返回值可以作为一个标识，用来作为clearInterval()函数的参数，来停止定时器函数的执行。
6.var speed=(end-oDiv.offsetLeft)/5，用来计算div运动的速度，end是要移动到的位置，offsetLeft是div左边缘距离body的距离。
7.speed=speed>0?Math.ceil(speed):Math.floor(speed)，如果speed是大于零的就采用上舍入，小于零就进行下舍入。
8.if(Math.abs(end-oDiv.offsetLeft)<=speed)，判断是否已经到底目的位置，其实offsetLeft的值永远不可能达到我们规定的值，因为speed的值不可能到达0，极限是1或者-1。
9.clearInterval(timer)，停止定时器函数的执行。
10.oDiv.style.left=end+‘px‘，将div的left属性值设置为规定的值。
11.oDiv.style.left=oDiv.offsetLeft+speed+‘px‘，设置div的left属性值。
二.相关阅读:
1.Math.ceil()函数可以参阅javascript的Math对象的ceil()方法一章节。
2.Math.floor()函数可以参阅javascript的Math.floor()方法一章节。
3.setInterval()函数可以参阅setInterval()函数用法详解一章节。
4.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。
5.offsetWidth属性可以参阅scrollTop、offsetHeight和offsetTop等属性用法详解一章节。
6.offsetLeft属性可以参阅offsetLeft、clientLeft和scrollLeft等属性的用法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10782
更多内容可以参阅:http://www.softwhy.com/javascript/
标签：
原文地址：http://www.cnblogs.com/zhengzebiaodashi/p/5150069.html
