一个div 缓冲运动—变宽

css:

#div{
    width:100px;
    height:100px;
    background: yellowgreen;
}
 #line{
     width:1px;
     height:300px;
     background:red;
     position: absolute;
     left:300px;
 }

html:

<div id="div"></div>
<div id="line"></div>

js

window.onload=function () {
   var oDiv=document.getElementById("div");

    oDiv.onmouseover=function () {
       startMove(300)
   };
    oDiv.onmouseout=function () {
        startMove(100)
    }
   //运动框架
    var timer=null;
   function startMove(itarget) {
       clearInterval(timer);
       timer=setInterval(function () {
           var ispeed=(itarget-oDiv.offsetWidth)/8;
           ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
           if(oDiv.offsetWidth==itarget){
               clearInterval(timer)
           }else{
               oDiv.style.width=oDiv.offsetWidth+ispeed+"px";
           }
       },30)
   }
}