1 <style type="text/css"> 2 div { 3 width: 100px; 4 height: 50px; 5 background: red; 6 margin: 10px; 7 } 8 </style> 9 <body> 10 <div></div> 11 <div></div> 12 <div></div> 13 </body> 14 <script type="text/javascript"> 15 window.onload = function () { 16 var aDiv = document.getElementsByTagName('div'); 17 for (var i = 0; i < aDiv.length; i++) { 18 aDiv[i].timer=null; 19 aDiv[i].onmouseover = function () { 20 startMove(this, 400); 21 }; 22 aDiv[i].onmouseout = function () { 23 startMove(this, 100); 24 }; 25 } 26 } 27 28 function startMove(obj, iTarget) { 29 clearInterval(obj.timer); 30 obj.timer = setInterval(function () { 31 var speed = (iTarget - obj.offsetWidth) / 60; 32 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 33 if (obj.offsetWidth == iTarget) { 34 clearInterval(obj.timer); 35 } else { 36 obj.style.width = obj.offsetWidth + speed + 'px'; 37 } 38 }, 1); 39 } 40 </script>