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>新闻热点
疑难解答
