网页右侧弹出有缓冲效果的工具栏 

 1 <!DOCTYPE html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>网页右侧弹出固定伸缩框</title>
 5 <style type="text/css">
 6 #common_box{width:300px;position:fixed;_position:absolute;right:0;top:40%;border:1px solid #789;background:#fff;z-index:88}
 7 #cli_on{width:30px;height:180px;float:left;cursor:pointer;background:#ac8932;text-align:center;line-height:180px}
 8 </style>
 9 </head>
10 
11 <body>
12 
13 <div id="common_box">
14  <div id="cli_on">+</div>
15  <div>
16   这里放置菜单内容
17  </div>
18 </div>
19 
20 </body>
21 </html>
22 <script type="text/javascript">
23 window.onload = function() {
24  var combox = document.getElementById("common_box");
25  var cli_on = document.getElementById("cli_on");
26  var flag = true, timer = null, initime = null, r_len = 0;
27  
28  cli_on.onclick = function () {
29   /*如果不需要动态效果，这两句足矣
30   combox.style.right = flag?'-270px':0;
31   flag = !flag;
32   */
33   clearTimeout(initime);
34   //根据状态flag执开展开收缩
35   if (flag) {
36    
37    timer = setInterval(slideright, 10);
38   } else {
39    
40    timer = setInterval(slideleft, 10);
41   }
42  }
43  
44  //展开
45  function slideright() {
46   if (r_len <= -270) {
47    clearInterval(timer);
48    flag = !flag;
49    return false;
50   } else {
51    r_len -= 5;
52    combox.style.right = r_len + 'px';
53   }
54   
55  }
56  
57  //收缩
58  function slideleft() {
59   if (r_len >= 0) {
60    clearInterval(timer);
61    flag = !flag;
62    return false;
63   } else {
64    r_len += 5;
65    combox.style.right = r_len + 'px';
66   }
67  }
68  
69  //加载后3秒页面自动收缩
70  initime = setTimeout("cli_on.click()", 3000);
71 }
72 </script>

 

posted @ 2013-08-27 16:46  鲤鱼在睡觉  阅读(361)  评论(0)    收藏  举报