运动的原理： 

    让某件物品沿着某种方向随着时间的变化改变位置

setInterval(function(){  
    obox.style.left = obox.offsetLeft+10+"px";  
},30)

    让页面中的obox元素的left值，每30毫秒，在自身left的基础上增加10像素

    为什么是30毫秒呢？

    因为电影播放每秒24帧，人眼就识别不出卡顿了，但是对于电脑来说，处理速度相对较快，需要每秒30帧以上才会显得流畅

边界处理

 当元素的offsetLeft超出一定距离或到达一个边界值后，停止计时器

var timer;  
timer = setInterval(function(){  
    if(obox.offsetLeft>=200){  
        clearInterval(timer);  
    }else{\[  
        obox.style.left = obox.offsetLeft+10+"px";  
    }  
},30)

我们先来实现一个简单的功能，当我们点击按钮之后，让一个元素动起来。并且到达500的边界之后立刻停止下来

点击运动

多元素缓冲运动事件委托demo