分享到就是鼠标移入慢慢弹出DIV，鼠标移出慢慢缩回DIV。
运动框架的大体思路：1、在开始运动之前关闭已有的定时器，这样是防止多个点击事件触发多个定时器产生的运动。2、把运动和停止分隔开if else
分享到代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 #div{position:absolute;top:174px;left:-150px;width:160px;height:200px;background:#ccc;} 8 </style> 9 <script> 10 window.onload=function() 11 { 12 var oDiv=document.getElementById('div'); 13 var timer=null; 14 15 oDiv.onmouseover=function() 16 { 17 startMove(0); 18 }; 19 20 oDiv.onmouseout=function() 21 { 22 startMove(-150); 23 }; 24 25 function startMove(iTarget) 26 { 27 clearInterval(timer); 28 timer=setInterval(function(){ 29 var speed=0; 30 if(oDiv.offsetLeft<iTarget){ //当前位置小于目标位置，要往目标位置去就要用正数，如果当前位置大于目标位置，要往目标位置去就要用负数。 31 speed=10; 32 } 33 else{ 34 speed=-10; 35 } 36 37 if(oDiv.offsetLeft==iTarget){ 38 clearInterval(timer); 39 } 40 else{ 41 oDiv.style.left=oDiv.offsetLeft+speed+'px'; 42 } 43 },30); 44 }; 45 46 }; 47 </script> 48 </head> 49 50 <body> 51 <div id="div"> 52 </div> 53 </body> 54 </html>