你的位置:首页 > Java教程

[Java教程]js实现的运动框架代码实例


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/