div运动（分享到） 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>div移动</title>
 7     <style>
 8         #div1 {
 9             width: 100px;
10             height: 200px;
11             background: #ccc;
12             position: absolute;
13             left: -100px;
14             top: 0px;
15         }
16         
17         #div1 span {
18             width: 20px;
19             height: 60px;
20             line-height: 20px;
21             text-align: center;
22             left: 100px;
23             top: 70px;
24             background: yellow;
25             position: absolute;
26         }
27     </style>
28     <script>
29         window.onload = function() {
30             var oDiv = document.getElementById('div1');
31             oDiv.onmouseover = function() {
32                 startMove(0);
33             }
34             oDiv.onmouseout = function() {
35                 startMove(-100);
36             }
37         }
38         var timer = null;
39 
40         function startMove(iTarget) {
41             var oDiv = document.getElementById('div1');
42             clearInterval(timer);
43             timer = setInterval(function() {
44                 var iSpeed = 0;
45                 if (oDiv.offsetLeft < iTarget) {
46                     iSpeed = 10;
47                 } else {
48                     iSpeed = -10;
49                 }
50                 if (oDiv.offsetLeft == iTarget) {
51                     clearInterval(timer);
52                 } else {
53                     oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
54                 }
55             }, 30)
56         }
57     </script>
58 </head>
59 
60 <body>
61     <div id="div1"><span>分享到</span></div>
62 </body>
63 
64 </html>

 

查看范例

posted @ 2017-02-13 16:14  Mr_W_Blog  阅读(181)  评论(0)    收藏  举报