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>