javascript div元素弹性缓冲运动代码实例
弹性缓冲运动是一种比较人性化的效果，下面就通过代码实例做一下简单介绍。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
margin:5px auto;
text-align:center;
background:#f0f0f0;
}
#box{
position:absolute;
top:20px;
left:20px;
width:100px;
height:60px;
border:1px solid #808;
}
#st{
cursor:pointer;
background:#ccf;
margin:5px;
}
#st{
display:block;
}
</style>
<script type="text/javascript">
var el=500;
var p=10;
var t=20;
function done(){
var cl = parseInt(getStyle(box,'left'));
if(cl<el){
box.style.left = cl + Math.ceil((el-cl)/p) + 'px';
setTimeout('done()', t);
}
else {
box.style.left = el + 'px';
this.style.display = 'none';
}
}
function getStyle( elem, name ){
if (elem.style[name]){
return elem.style[name];
}
else if (elem.currentStyle) {
return elem.currentStyle[name];
}
else if (document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
}
else { return null; }
}
window.onload=function(){
var st = document.getElementById('st');
st.onclick=function(){done()}
}
</script>
</head>
<body>
<div id="box">
<span id="st">查看效果</span>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.var el=500，声明一个变量并赋值500，它规定了left属性最大值。
（2）.var p=10，声明一个变量并赋值为10，它用来进行计算每次执行的运动尺寸。
（3）.var t=20，声明一个变量并赋值为20，它用来作为定时器函数执行延迟的时间。
（4）.function done(){},此方法是实现缓冲运动的核心。
（5）.var cl = parseInt(getStyle(box,'left'))，获取元素当前的left属性值。
（6）.if(cl<el){
box.style.left = cl + Math.ceil((el-cl)/p) + 'px';
setTimeout('done()', t);
} ,如果当前的left属性值小于最大值。
就继续设置元素的left属性值，因为el-cl是越来越小的，所以运动速度会越来越快。
然后使用递归方式不断执行done方法。
（7）.else {
box.style.left = el + 'px';
this.style.display = 'none';
}，否则的话
元素的left值设置为最大值。
然后隐藏当span元素。
（8）.function getStyle( elem, name )此方法可以获取元素的指定样式属性值，具体可以参阅相关阅读。
二.相关阅读:
（1）.parseInt()方法可以参阅javascript parseInt()函数一章节。
（2）.Math.ceil()方法可以参阅javascript Math.ceil()一章节。
（3）.setTimeout()方法可以参阅setTimeout()一章节。
（4）.getStyle()方法可以参阅getComputedStyle()和currentStyle属性的用法一章节。