侧边栏分享菜单

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