之前讲过一种闭包 来 现实js动画,今天讲讲非闭包的方式来实现的呀:
1 //我们可以使用非闭包方法来实现; 2 3 var index=1; //非闭包的关键就是使用全局变量的呀; 4 var Timer; 5 function cool(){ 6 Timer=setInterval(function(){ 7 change(index); 8 index++; 9 if(index==100){ 10 index=1; 11 clearInterval(Timer); 12 } 13 },10) //时间间隔 14 } 15 function change(val){ 16 var obj=document.getElementById("man"); 17 var zhen=1; //用这个index 来控制 动画的帧数 18 //针数 越小 那么动画 就越光滑的i呀; 19 var len=zhen*val; 20 obj.style.height=len+"px"; 21 }
//ps:这个效果非常的平滑,看起来心情和舒畅滴呀;
更为具体的实例应用,请看我的另外一篇文章。
较为完善的代码:
var Timer=null; function move2(){ var obj=document.getElementById("move"); var zhen=3; //相当于speed,暂时没考虑这个方向; var iTarget=200; clearInterval(Timer); //始终柑橘这个方法不够流畅 setInterval(function (){ if((iTarget-obj.offsetHeight)>zhen){ obj.style.height=obj.offsetHeight+zhen+"px"; }else{ clearInterval(Timer); obj.style.height=iTarget+"px"; //最后强行个加到目标点; } },10) } function test(){ var obj=document.getElementById("move"); var value=obj.offsetHeight; alert(value); }
JS-实现图片横向滑动