1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;} 8 #div2 {width: 30px; height: 60px; background: black; position: absolute; right: -30px; top: 70px; color: white; text-align: center;} 9 </style> 10 <script> 11 window.onload = function() { 12 13 var oDiv1 = document.getElementById('div1'); 14 var oDiv2 = document.getElementById('div2'); 15 var iTimer = null; 16 17 oDiv1.onmouseover = function() { 18 startMove(0, 10); 19 } 20 21 oDiv1.onmouseout = function() { 22 startMove(-100, -10); 23 } 24 25 function startMove(iTarget, iSpeed) { 26 clearInterval(iTimer); 27 28 iTimer = setInterval(function() { 29 30 if (oDiv1.offsetLeft == iTarget) { 31 clearInterval(iTimer); 32 } else { 33 oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px'; 34 } 35 36 }, 30); 37 } 38 39 } 40 </script> 41 </head> 42 43 <body> 44 <div id="div1"> 45 <div id="div2">分享到</div> 46 </div> 47 </body> 48 </html>