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>
查看范例
