1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>标题</title>
6 <meta name="keywords" content="">
7 <meta name="description" content="">
8 <style>
9 *{
10 margin: 0px;
11 padding: 0px;
12 }
13 #div1{
14 width: 200px;
15 height: 200px;
16 background-color: blue;
17 position: relative;
18 top: 0px;
19 left: -200px;
20 }
21 span{
22 width:20px;
23 height: 50px;
24 cursor: pointer;
25 position: absolute;
26 top: 60px;
27 left: 200px;
28 background-color: red;
29 padding-top: 20px;
30 }
31 </style>
32 </head>
33 <body>
34 <div id="div1"><span>分享</span></div>
35 <script>
36 var div1=document.getElementById('div1');
37 var timer1=null;
38 var timer2=null;
39 var i=-200;
40 div1.onmouseover=function(){
41 clearInterval(timer1);
42 clearInterval(timer2);
43 timer1=setInterval(function() {
44 i++;
45 if (i>=0) {
46 i=0;
47 };
48 div1.style.left=i+"px";
49 },10)
50
51 }
52 div1.onmouseout=function(){
53 clearInterval(timer1);
54 clearInterval(timer2);
55 timer2=setInterval(function() {
56 i--;
57
58 if (i<=-200) {
59 i=-200;
60 };
61 div1.style.left=i+"px";
62 },10)
63
64 }
65 /*div1.onmouseover=function(){
66 clearInterval(timer1);
67 clearInterval(timer2);
68 startmove();
69 }
70 div1.onmouseout=function(){
71 clearInterval(timer1);
72 clearInterval(timer2);
73 stopmove();
74 //alert(1)
75 }
76 function startmove(){
77
78 timer1=setInterval(function(){
79 if (div1.offsetLeft==0) {
80 clearInterval(timer1);
81 clearInterval(timer2);
82 }else{
83 div1.style.left=div1.offsetLeft+1+"px";
84 }
85 },1)
86 }
87 function stopmove(){
88 timer2=setInterval(function(){
89 if (div1.offsetLeft==-200) {
90 clearInterval(timer2);
91 clearInterval(timer1);
92 }else{
93 div1.style.left=div1.offsetLeft-1+"px";
94 }
95 },1)
96 }*/
97 </script>
98 </body>
99 </html>
