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>
