JavaScript运动框架代码实例
JavaScript运动框架代码实例属于前端实例代码，有关更多实例代码大家可以查看。
元素的运动效果在大量的场景中都有应用，比较典型的是网站的客服系统，一般都会随着滚动条运动。
本章节分享一个JavaScript运动框架实例。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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属性参阅offsetWidth一章节。
（6）.offsetLeft属性参阅offsetLeft用法一章节。
JavaScript运动框架代码实例，这样的场景在实际项目中还是用的比较多的，关于JavaScript运动框架代码实例就介绍到这了。