本文實例講述了JS實現(xiàn)網(wǎng)頁右側(cè)帶動畫效果的伸縮窗口代碼。分享給大家供大家參考，具體如下：
這是一款帶緩沖效果的網(wǎng)頁右側(cè)固定伸縮窗口，點擊帶顏色的區(qū)域，浮動的層窗口就會伸縮出來，再次點擊則縮進去。無jQuery，完全JavaScript實現(xiàn)的效果。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-right-dh-dlg-style-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>帶緩沖效果的網(wǎng)頁右側(cè)固定伸縮窗口</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">#common_box{width:300px;position:fixed;_position:absolute;right:0;top:40%;border:1px solid #789;background:#fff;z-index:88}#cli_on{width:30px;height:180px;float:left;cursor:pointer;background:#ac8932;text-align:center;line-height:180px}</style></head><body><div style="width:100%;height:1024px;background:#789"></div><div id="common_box"> <div id="cli_on">+</div> <div> 這里放置菜單內(nèi)容 </div></div><script type="text/javascript">window.onload = function() { var combox = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var flag = true, timer = null, initime = null, r_len = 0; cli_on.onclick = function () { /*如果不需要動態(tài)效果，這兩句足矣 combox.style.right = flag?'-270px':0; flag = !flag; */ clearTimeout(initime); //根據(jù)狀態(tài)flag執(zhí)開展開收縮 if (flag) { r_len = 0; timer = setInterval(slideright, 10); } else { r_len = -270; timer = setInterval(slideleft, 10); } } //展開 function slideright() { if (r_len <= -270) { clearInterval(timer); flag = !flag; return false; } else { r_len -= 5; combox.style.right = r_len + 'px'; } } //收縮 function slideleft() { if (r_len >= 0) { clearInterval(timer); flag = !flag; return false; } else { r_len += 5; combox.style.right = r_len + 'px'; } } //加載后3秒頁面自動收縮 initime = setTimeout("cli_on.click()", 3000);}</script></body></html>希望本文所述對大家JavaScript程序設(shè)計有所幫助。
新聞熱點
疑難解答
