九牛一毛-javascript网页隐藏工具栏

最新推荐文章于 2021-06-04 01:20:29 发布

track sun

最新推荐文章于 2021-06-04 01:20:29 发布

阅读量138

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xuezhen/p/5224852.html

版权

很多网页中都能看到侧边分享栏或工具栏，如这样：

大致就是页面只呈现分享那个蓝色的小矩形，当鼠标移入或点击的时候，里面的内容会呈现出来。下面用DIV实现一下。

首先设置DIV的样式：先写一个包含内容的大DIV，id设为div1，在其内部加入一个div。想让它始终在页面出现position设为fixed，不然就设为absolute。其内部DIV也设为绝对定位，并根据高度调整距离，使整体显示美观些，最终代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin:0px;
 9             padding:0px;
10         }
11         #div1{
12             width:150px;
13             height:200px;
14             background-color:gray;
15             position:absolute;
16         }
17         #div1>div{
18             width:20px;
19             height:60px;
20             border-top-right-radius:10px;
21             border-bottom-right-radius:10px;
22             background-color:red;
23             position:absolute;
24             right:-20px;
25             top:70px;
26             line-height:30px;
27         }
28     </style>
29 </head>
30 <body>
31     <div id='div1'>
32         <div>工具</div>
33     </div>
34 </body>
35 </html>

View Code

效果图：

让灰色区域隐藏起来好办，给DIV1添加一个left：-150px即可。而通过给其添加移入移出事件和定时器setInterval可实现移入出现移出隐藏的功能。初步代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin:0px;
 9             padding:0px;
10         }
11         #div1{
12             width:150px;
13             height:200px;
14             background-color:gray;
15             position:absolute;
16             left:-150px;
17         }
18         #div1>div{
19             width:20px;
20             height:60px;
21             border-top-right-radius:10px;
22             border-bottom-right-radius:10px;
23             background-color:red;
24             position:absolute;
25             right:-20px;
26             top:70px;
27             line-height:30px;
28         }
29     </style>
30     <script>
31         window.onload=function(){
32             var oDiv=document.getElementById('div1');
33             var trigger;
34 
35             oDiv.onmouseover=function(){
36                 clearInterval(trigger);
37                 trigger=setInterval(function(){
38                     oDiv.style.left=oDiv.offsetLeft+10+'px';
39                 },30);            
40             };
41             oDiv.onmouseout=function(){
42                 clearInterval(trigger);
43                 trigger=setInterval(function(){
44                     oDiv.style.left=oDiv.offsetLeft-10+'px';
45                 },30);                
46             };
47         };
48     </script>
49 </head>
50 <body>
51     <div id='div1'>
52         <div>工具</div>
53     </div>
54 </body>
55 </html>

View Code

可以发现确实移入右移移出左移了，接下来加上一个距离的限制：

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

View Code

这样子看起来已经实现需要的功能了，重要的几点：
1：两个事件函数开头需要清除定时器，避免定时器一直工作。

2：offsetLeft为当前元素距离定位左边的距离，向右移动就不断加大，向左移动就不断减小。

3：定时器后面的参数为函数执行的时间间隔，单位为毫秒，与单位时间移动的像素配合控制移动的效果，间隔越短像素越低视觉效果越平滑。

对于代码本身，有很多可以优化的地方，比如两个函数都有类似的部分，可以合并，对于这两段：

 1             oDiv.οnmοuseοver=function(){
 2                 clearInterval(trigger);
 3                 trigger=setInterval(function(){
 4                     if(oDiv.offsetLeft<0){
 5                         oDiv.style.left=oDiv.offsetLeft+10+'px';
 6                     }
 7                 },30);            
 8             };
 9             oDiv.onmouseout=function(){
10                 clearInterval(trigger);
11                 trigger=setInterval(function(){
12                     if(oDiv.offsetLeft>-150){
13                         oDiv.style.left=oDiv.offsetLeft-10+'px';
14                     }
15                 },30);                
16             };

View Code

发现除了他们的移动方向和判断移动方向的位置以外别的完全一致，这样可通过给一个函数传递参数的方式来让代码变的更简洁。另一方面，我们将左侧的目标位置设为传入函数的参数，通过这一参数和当前左侧的位置作对比来控制移动的方向，移动的函数：

 1         function moveone(target){
 2             var oDiv=document.getElementById('div1');
 3             clearInterval(trigger);    
 4             var speed=0;
 5 
 6             if(oDiv.offsetLeft<target){
 7                 speed=10;
 8             }
 9             else{
10                 speed=-5;
11             }
12 
13             trigger=setInterval(function(){
14                 if(oDiv.offsetLeft==target){
15                     clearInterval(trigger);        
16                 }
17                 else{
18                     oDiv.style.left=oDiv.offsetLeft+speed+'px';
19                 }
20             },30);
21         }

View Code

在移入移出的事件中加入这个函数，offsetLeft目标值朝右移设置为0，朝左移设置为图像的宽度，注意加负号，为-150。而速度为了看起来舒服让他快点出现慢点消失，完成的代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin:0px;
 9             padding:0px;
10         }
11         #div1{
12             width:150px;
13             height:200px;
14             background-color:gray;
15             position:absolute;
16             left:-150px;
17         }
18         #div1>div{
19             width:20px;
20             height:60px;
21             border-top-right-radius:10px;
22             border-bottom-right-radius:10px;
23             background-color:red;
24             position:absolute;
25             right:-20px;
26             top:70px;
27             line-height:30px;
28         }
29     </style>
30     <script>
31         window.onload=function(){
32             var oDiv=document.getElementById('div1');
33             oDiv.onmouseover=function(){
34                 moveone(0);    
35             };
36             oDiv.onmouseout=function(){
37                 moveone(-150);    
38             };
39         };
40 
41         var trigger;
42 
43         function moveone(target){
44             var oDiv=document.getElementById('div1');
45             clearInterval(trigger);    
46             var speed=0;
47 
48             if(oDiv.offsetLeft<target){
49                 speed=10;
50             }
51             else{
52                 speed=-5;
53             }
54 
55             trigger=setInterval(function(){
56                 if(oDiv.offsetLeft==target){
57                     clearInterval(trigger);        
58                 }
59                 else{
60                     oDiv.style.left=oDiv.offsetLeft+speed+'px';
61                 }
62             },30);
63         }
64     </script>
65 </head>
66 <body>
67     <div id='div1'>
68         <div>工具</div>
69     </div>
70 </body>
71 </html>