所属分类:HTML网页，JS语言与代码
http://www.jsweb8.cn/html/BiaoGeTuCeng/1494.htm
[code]<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页右侧带缓冲效果的可伸缩层（原生JS）-JS特效学院-www.jsweb8.cn</title>
<style type="text/css">
ul,li{list-style:none}
#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>
<ul>
<li><a href="http://www.jsweb8.cn">导航菜单</a></li>
<li><a href="http://www.jsweb8.cn">图形特效</a></li>
<li><a href="http://www.jsweb8.cn">JS特效</a></li>
<li>内容可自定义。带缓冲效果的可伸缩层</li>
<li>内容可用作客服，菜单，或者社会化分享等模板，总之自己可以任意定义</li>
</ul>
</div>
</div>
</body>
</html>
<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> [/code]
[code]<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页右侧带缓冲效果的可伸缩层（原生JS）-JS特效学院-www.jsweb8.cn</title>
<style type="text/css">
ul,li{list-style:none}
#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>
<ul>
<li><a href="http://www.jsweb8.cn">导航菜单</a></li>
<li><a href="http://www.jsweb8.cn">图形特效</a></li>
<li><a href="http://www.jsweb8.cn">JS特效</a></li>
<li>内容可自定义。带缓冲效果的可伸缩层</li>
<li>内容可用作客服，菜单，或者社会化分享等模板，总之自己可以任意定义</li>
</ul>
</div>
</div>
</body>
</html>
<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> [/code]