分享菜单效果

分享菜单效果：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>分享菜单</title>
 6         <style>
 7             #div1{width: 100px; height: 200px; background-color: #ccc;position: absolute; left: -100px}
 8             #div1 span{width: 20px; height: 60px; background-color: yellow; position: absolute; line-height: 20px; left: 100px;top: 70px}
 9         </style>
10         <script>
11             window.onload = function(){
12                 var oDiv = document.getElementById("div1");
13                 oDiv.onmouseover = function(){
14                     //-100 > 0
15                     startMove();
16                 }
17 
18                 oDiv.onmouseout = function(){
19                     //0 > -100
20                     startMove2();
21                 }
22             }
23 
24             var timer = null;
25             //使div出来的函数
26             function startMove(){
27                 var oDiv = document.getElementById("div1");
28                 clearInterval(timer);
29                 var speed = 5;
30                 timer = setInterval(function(){
31                     if(oDiv.offsetLeft == 0){
32                         clearInterval(timer);
33                     }else{
34                         oDiv.style.left = oDiv.offsetLeft + speed + "px";
35                     }
36                 }, 30);
37             }
38             //使div隐藏的函数
39             function startMove2(){
40                 var oDiv = document.getElementById("div1");
41                 clearInterval(timer);
42                 var speed = -5;
43                 timer = setInterval(function(){
44                     if(oDiv.offsetLeft == -100){
45                         clearInterval(timer);
46                     }else{
47                         oDiv.style.left = oDiv.offsetLeft + speed + "px";
48                     }
49                 }, 30);
50             }
51         </script>
52     </head>
53     <body>
54         <div id = "div1">
55 <!--             span必须写到要隐藏的里面，不然隐藏到里面后，鼠标就没有
56             办法点到了,也就没办法出来了，让span相对于div定位定出来，
57             然后，鼠标移到span上的时候，因为事件冒泡的存在，也就相当于
58             移动了div上。
59              -->            
60              <span>分享到</span>
61         </div>
62     </body>
63 </html>

浏览器效果：

上面的两个startMove函数大部分都是相同的，加形参加以简化。

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

形参能用一个就不用俩，再加以简化：

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