<br> window.onload=function()<br> {<br> var re=document.getElementById("mButton");<br> var hei="300";<br> var wid="300";<br> re.onclick=slideDown;<br> function slideDown()<br> {<br> elem=document.getElementById("container");<br> elem.style.height='0px';<br> elem.style.width='0px';<br> elem.style.display="";<br> for(var i=0;i<100;i+=5)<br> {<br> (function()<br> {<br> var pos=i;<br> //alert(pos+"\n"+(pos/100)*hei+"\n"+(pos+1)*10);<br> setTimeout(function(){elem.style.height=(pos/100)*hei+"px";elem.style.width=(pos/100)*wid+"px";},(pos+1)*100);<br> })();<br> }<br> }<br> alert(document.body.scrollWidth+'px');<br> alert(document.body.scrollLeft+"px");<br> };<br>
Slider
现在是有缓动效果的，可是把
setTimeout(function(){elem.style.height=(pos/100)*hei+"px";elem.style.width=(pos/100)*wid+"px";},(pos+1)*100);中的（pos+1）*10改成常数，比如50后，就没有缓动效果了，这是为什么啊？
因为这个算法实现的div的size是线性增长的
width(K) = K * w (K为增长系数, w为最大宽度)
height(K) = K * h (K为增长系数, h为最大高度)
所以延时也要与size的增长一致，即呈线性增长
delay(T) = T * d (T为增长系数，d为延时基数)
如果想要将delay设为常数，同时达到相同的效果，那么size的增长率也应是一个常数，即在上一size的基础上加上一个常数值。
window.onload=function() { var re=document.getElementById("mButton"); var hei="300"; var wid="300"; re.onclick=slideDown; function slideDown() { elem=document.getElementById("container"); elem.style.height='0px'; elem.style.width='0px'; elem.style.display=""; setTimeout(function() {slid(elem);}, 5); } function slid(elem){ elem.style.height=elem.style.width= parseInt(elem.style.width) + 5 +"px"; if (parseInt(elem.style.width) <= wid) { setTimeout(function() {slid(elem);}, 10); } } alert(document.body.scrollWidth+'px'); alert(document.body.scrollLeft+"px"); };
Slider
首先，这里有一点要明确，修改成50之后，不是没有缓动效果了，而是速度很快，你看不到而已，你把它修改成500，就能看到了，但是看到的效果并不是你想要的。这是为什么呢？分析程序，你就会知道，第一次进入循环，设置了时间，那么第二次进来，这个时间应该是一个累加的过程，这样在setTimeout执行上，时间累加了，才能显示出一个缓动的效果，如果是一个常量，那么循环的第一次和第二次执行的时间间隔不会很大，所以，两次setTimeout执行的间隔较小，你就看不到了。