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运动框架代码实例就介绍到这了。

回复

我来回复
  • 暂无回复内容