1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="content-type" charset="utf-8" /> 5 <meta http-equiv="content-type" content="text/html" /> 6 <title>demo</title> 7 </head> 8 <body> 9 10 <div id="odiv" style="position:absolute;200px;height:100px;background:red;left:0;border:1px solid #333;"></div> 11 12 13 <script type="text/javascript"> 14 15 var odiv=document.getElementById('odiv'); 16 17 odiv.onmouseover=function(){ 18 move(this,'width',500,function(){ 19 move(odiv,'left',300,function(){ 20 move(odiv,'height',500,function(){ 21 move(odiv,'borderWidth',10) 22 }); 23 }); 24 }); 25 } 26 27 28 function move(obj,arr,target,fn){ 29 clearInterval(obj.dt); 30 obj.dt=setInterval(function(){ 31 obj.ol=parseInt(obj.style[arr]); 32 if(obj.ol==target){ 33 clearInterval(obj.dt); 34 if(fn) fn(); 35 }else{ 36 obj.speed=(target-obj.ol)/8; 37 obj.speed>0?obj.speed=Math.ceil(obj.speed):obj.speed=Math.floor(obj.speed); 38 obj.style[arr]=obj.ol+obj.speed+"px"; 39 } 40 },30); 41 } 42 43 44 </script> 45 </body> 46 </html>