JS實現網頁右側帶動畫效果的伸縮窗口代碼
編輯：關於JavaScript
本文實例講述了JS實現網頁右側帶動畫效果的伸縮窗口代碼。分享給大家供大家參考，具體如下：
這是一款帶緩沖效果的網頁右側固定伸縮窗口，點擊帶顏色的區域，浮動的層窗口就會伸縮出來，再次點擊則縮進去。無jQuery，完全JavaScript實現的效果。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/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>帶緩沖效果的網頁右側固定伸縮窗口</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>
這裡放置菜單內容
</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 () {
/*如果不需要動態效果，這兩句足矣
combox.style.right = flag?'-270px':0;
flag = !flag;
*/
clearTimeout(initime);
//根據狀態flag執開展開收縮
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程序設計有所幫助。
小編推薦
熱門推薦