带动画效果的网页右侧伸缩窗口

2024-09-05 12:18:29

字体：大中小

来源：转载

供稿：网友

带缓冲效果的网页右侧固定伸缩窗口，点击带颜色的区域，浮动的层窗口就会伸缩出来，再次点击则缩进去。无jQuery，完全JavaScript实现的效果。

<!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>

上一篇：jQuery定义的侧边栏宽度固定而内容宽度自适应的网页

下一篇：阻止右键菜单（阻止默认事件）

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注