javascript缓冲运动框架代码分析

快乐打工仔 分类:实例代码

关于缓冲运动框架在大量的特效中都有应用,比如在线客服,点击回到网页顶部等等,具有良好的人性化视觉效果,下面就详细分析一段实例代码,希望能够给有此方面需求的朋友带来一定的帮助。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>运动框架代码-犀牛前端部落</title>
<style type="text/css">
#odiv{
  position:absolute;
  width:200px;
  height:100px;
  background:red;
  left:10px;
  border:1px solid #333;
}
input{
  margin-top:200px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById('odiv');  
  var obt=document.getElementById("bt");
   
  obt.onclick=function(){
     move(odiv,"left",600,move);
  }
}
function GetCurrentStyle(obj, prop){      
  if(obj.currentStyle){         
    return obj.currentStyle[prop];      
  }       
  else if(window.getComputedStyle){                
    return window.getComputedStyle(obj,null)[prop];      
  }       
  return null;    
}
function move(obj,prop,target){ 
  var dt=null;
  var speed=0;
  var ol=0; 
  dt=setInterval(function(){ 
    ol=parseInt(GetCurrentStyle(obj,prop)); 
    if(ol>=target){ 
      clearInterval(dt); 
    }
    else{ 
      speed=(target-ol)/8; 
      speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);  
      obj.style[prop]=ol+speed+"px"; 
    } 
  },30); 
} 
</script>
</head>
<body>
<div id="odiv"></div>
<input type="button" value="点击开始运动" id="bt" />
</body>
</html>

以上代码实现了缓冲运动效果,当点击按钮的时候,div可以运动起来,并且运动不是匀速的,而是具有缓冲效果,下面介绍一下此效果的实现过程。

一.实现原理:

当点击按钮的时候,可以运行move()函数,此函数可以使用定时器函数setInterval()来不断的调用函数,以实现运动效果,在定时器调用的函数中,使用GetCurrentStyle()函数可以获取对象的当前left属性值,如果当前的left属性值大于等于设定的目标值,则停止定时器函数的运行,否则就通过当前的left属性值和目标值不断设置运动的速度,然后再设置对象的left属性值,这样就实现了缓冲运动框架效果。

二.代码注释:

1.window.onload=function(){},当文档内容完全加载完成再去执行函数中的代码。

2.var odiv=document.getElementById('odiv'),获取id属性值为odiv的元素对象。

3.var obt=document.getElementById("bt"),获取id属性值为bt的与元素对象。

4.obt.onclick=function(){},为obt注册onclick事件处理函数。

5.move(odiv,"left",600,move),调用函数。

6.function GetCurrentStyle(obj, prop) {},此哈数可以获取指定元素指定样式属性的属性值,在相关内容中会有极少。

7.function move(obj,prop,target){},实现缓冲运动的函数,具有三个参数,obj是要设置样式属性的对象元素,prop是要进行设置的属性名称,target就是属性要达到的目标值,不带单位。

8.var dt=null;声明一个变量,后面会用作setInterval()定时器函数的返回值。

9.var speed=0,声明一个变量,用于存储速度值。

10.var ol=0,声明一个变量,用于存储指定属性的当前属性值。

11.dt=setInterval(function(){},30),用定时器函数每隔30毫秒调用一次function(){}函数。

12. ol=parseInt(GetCurrentStyle(obj,prop)),获取当前元素的指定样式属性的属性值,并且使用parseInt()函数将其转换为整数。

13.if(ol>=target),判断是否大于等于目标值。

14.clearInterval(dt),停止定时器函数的运行。

15.speed=(target-ol)/8,设置当前运动速度,由于每一ol值都不同,也就实现了speed值的不同,那么运动速度就会出现缓冲效果。

16.speed>0?speed=Math.ceil(speed):speed=Math.floor(speed),对速度进行舍入操作。

17.obj.style[prop]=ol+speed+"px",设置元素的指定属性的style样式值。

三.相关阅读:

1.window.onload=function(){}可以参阅window.onload用法详解一章节。

2.GetCurrentStyle()可以参阅js如何获取非内部取样式表中定义的属性值一章节。

]3.setInterval()函数可以参阅setInterval()一章节。

4.parseInt()函数可以参阅JavaScript parseInt()一章节。

5.Math.ceil()函数可以参阅JavaScript Math.ceil()一章节。

6.Math.floor()函数可以参阅JavaScript Math.floor()一章节。

javascript缓冲运动框架代码分析,这样的场景在实际项目中还是用的比较多的,关于javascript缓冲运动框架代码分析就介绍到这了。

javascript缓冲运动框架代码分析属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容