多个div 缓冲运动—变宽

css:

div{
    width:100px;
    height:100px;
    background: yellowgreen;
    margin-top:20px;
}

html:

<div></div>
<div></div>
<div></div>

js

window.onload=function () {
   var oDiv=document.getElementsByTagName("div");
   for(var i=0;i<oDiv.length;i++){
       oDiv[i].timer=null;//给每个div设置timer属性（每个div都有个timer，这样就不会影响其他定时器了）
       oDiv[i].onmouseover=function () {
           startMove(this,300)
       }
       oDiv[i].onmouseout=function () {
           startMove(this,100)
       }
   }
   //运动框架
    var timer=null;
   function startMove(obj,itarget) {
       clearInterval(obj.timer);
       obj.timer=setInterval(function () {
           var ispeed=(itarget-obj.offsetWidth)/8;
           ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
           if(obj.offsetWidth==itarget){
               clearInterval(obj.timer)
           }else{
               obj.style.width=obj.offsetWidth+ispeed+"px";
           }
       },30)
   }
}