javascript缓冲弹性方式设置元素的尺寸
设置元素的尺寸当然是非常简单，但是普通的方式稍显粗暴不够美观，元素的尺寸瞬间完成。
而弹性方式则人性化很多，下面就是一段这样的代码实例，需要的朋友可以做一下参考。
代码实例如下:
<!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:100px;
left:20px;
width:100px;
height:60px;
border:1px solid #808;
}
#st{
cursor:pointer;
background:#ccf;
margin:5px;
}
</style>
<script type="text/javascript">
var sw=100;
var ew=580;
var p=10;
var t=20;
function done(){
var cw = parseInt(getStyle(box,'width'));
if(cw<ew){
box.style.width = cw + Math.ceil((ew-cw)/p) + 'px';
setTimeout('done()', t);
}
else{
box.style.width=ew+'px';
}
}
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 sw=100，元素的最初宽度。
（2）.var ew=580，元素的最大宽度。
（3）.var p=10，用来计算元素尺寸每次增长尺寸的一个值。
（4）.var t=20，规定定时器函数延迟执行的时间。
（5）.function done(){}，此方法是实现缓冲运动的核心。
（6）.var cw = parseInt(getStyle(box,'width'))，获取元素的width属性值。
（7）.if(cw<ew){
box.style.width = cw + Math.ceil((ew-cw)/p) + 'px';
setTimeout('done()', t);
}，如果当前的宽度小于最大宽度。
那么继续设置元素的宽度值，当然是逐步增加，但是由于ew-cw越来越小，那么增长的速度就越慢。
最后通过定时器函数递归的不断执行函数done。
（8）.else{
box.style.width=ew+'px';
}，否则的话设置元素的宽度等于最大宽度。
（9）.getStyle()的用法可以参阅相关阅读。
二.相关阅读:
（1）.parseInt()方法可以参阅javascript parseInt()一章节。
（2）.Math.ceil()方法可以参阅javascript Math.ceil()一章节。
（3）.setTimeout()方法可以参阅setTimeout()一章节。
（4）.getStyle()方法可以参阅getComputedStyle()和currentStyle属性的用法一章节。