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缓冲运动框架代码分析属于前端实例代码，有关更多实例代码大家可以查看。