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

<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.style

		var b = document.body

		var x = event.clientX + b.scrollLeft - s.pixelLeft

		var y = event.clientY + b.scrollTop - s.pixelTop

		var m = function()

		{

			if (event.button == 1)

			{

				s.pixelLeft = event.clientX + b.scrollLeft - x

				s.pixelTop = event.clientY + b.scrollTop - y

			}

			else document.detachEvent("onmousemove", m)

		}

		document.attachEvent("onmousemove", m)



		if (!this.z) this.z = 999

		s.zIndex = ++this.z

		event.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>
可以打开和隐藏层也可以拖动层

猜你喜欢
