原生js运动相关（一）

初学js运动的其实就对了定时器setTimeout()和setInterval()这两个方法的操作，一般就是操作些top、left、width、heigth、opacity等等。

一个简单的小demo

//例如点击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直到到达目的地。这样一个简单的匀速运动就做好了。之后我们在来看看变数运动是怎么操作的。变数运动可以让元素更加生动。