可以打开和隐藏层也可以拖动层

来源:互联网 发布:美国网络直播发展史 编辑:程序博客网 时间:2024/04/27 16:51
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"><!--body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}body,td,th {font-size: 12px;}a:link {text-decoration: none;}a:visited {text-decoration: none;}a:hover {text-decoration: none;}a:active {text-decoration: none;}--></style><script language="JavaScript" type="text/JavaScript"><!--//控制层移动function drag(obj){var s = obj.stylevar b = document.bodyvar x = event.clientX + b.scrollLeft - s.pixelLeftvar y = event.clientY + b.scrollTop - s.pixelTopvar m = function(){if (event.button == 1){s.pixelLeft = event.clientX + b.scrollLeft - xs.pixelTop = event.clientY + b.scrollTop - y}else document.detachEvent("onmousemove", m)}document.attachEvent("onmousemove", m)if (!this.z) this.z = 999s.zIndex = ++this.zevent.cancelBubble = true}//控制显示/隐藏function show(ID) //ID可以替换为变量名字{obj=document.getElementById("news_"+ID);if(obj.style.display=="none"){obj.style.display="";}else{obj.style.display="none";}}//--></script></head><body ondragstart="return false" style="margin:0px"><!--这里是层可以移动的--><div onmousedown="drag(this)"  style="left:260px;position:absolute;width:250px; border:solid 1px #000000; line-height:180%; margin-left:5px; margin-top:0px"><div style="float:left;background:#FF9900; width:68%; padding-left:5px">新闻中心</div><div style="float:right;background:#FF9900;width:30%"><a onClick="show(1)" href="#">展开/隐藏</a></div><div style="width:250px; height:200px" id="news_1">你好吗?</div></div><!--这里是层可以移动的--><!--这里是层可以打开和隐藏层的--><div style="width:250px; border:solid 1px #000000; line-height:180%; margin-left:5px; margin-top:3px"><div style="float:left;background:#FF9900; width:68%; padding-left:5px">新闻中心</div><div style="float:right;background:#FF9900;width:30%"><a onClick="show(2)" href="#">展开/隐藏</a></div><div style="width:250px; height:200px" id="news_2">我和好</div></div><!--这里是层可以打开和隐藏层的--></body></html>