简单的JS运动封装实例---侧栏分享到

 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>