初学js运动的其实就对了定时器setTimeout()和setInterval()这两个方法的操作,一般就是操作些top、left、width、heigth、opacity等等。
一个简单的小demo123456789101112131415//例如点击oBt1让一个div向右移动到900px的地方var oDiv=document.getElementById("div1");var oBt1=document.getElementById("bt1");var timer;oBt1.onclick=function(){ clearInterval(timer); timer=setInterval(function(){ if(oDiv.offsetLeft+10>=900){ oDiv.style.left="900px"; clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+10+"px"; } },30);}
一个简单的小动画就ok了,通过setInterval()方法让这个div有一个速度加成每过30毫秒这个div的left就增大10px直到到达目的地。这样一个简单的匀速运动就做好了。之后我们在来看看变数运动是怎么操作的。变数运动可以让元素更加生动。