1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style>
7 #div1{width: 100px;height: 200px;background-color: grey;position: absolute;left: -100px;top: 400px;}
8 #div1 span{width: 20px;height: 60px;background-color: orange;position: absolute;left: 100px;top: 70px;line-height: 20px;}
9 </style>
10 <script>
11 window.onload=function(){
12 var oDiv1=document.getElementById("div1");
13 oDiv1.onmouseover=function(){
14 startMove(5,0);
15 }
16 oDiv1.onmouseout=function(){
17 startMove(-5,-100);
18 }
19 var timer=null;
20 function startMove(speed,iTarget){
21 var oDiv1=document.getElementById("div1");
22 // var speed=5;
23 clearInterval(timer);
24 timer=setInterval(function(){
25 if(oDiv1.offsetLeft==iTarget){
26 clearInterval(timer);
27 }else{
28 oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
29 }
30 },30);
31 }
32 // function startMove2(){
33 // var oDiv1=document.getElementById("div1");
34 // var speed=-5;
35 // clearInterval(timer);
36 // timer=setInterval(function(){
37 // if(oDiv1.offsetLeft==-100){
38 // clearInterval(timer);
39 // }else{
40 // oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
41 // }
42 // },30);
43 // }
44 }
45 </script>
46 </head>
47 <body>
48 <div id="div1">
49 <span>分享到</span>
50 </div>
51 </body>
52 </html>