<html>
<head runat="server">
<title></title>
<style>
body
{
font: 12px Arial, Helvetica, sans-serif;
}
a
{
text-decoration: none;
}
a:hover
{
color: red;
}
</style>
<script language="javascript" type="text/javascript">
function ChatHidden() {
document.getElementById("div2").style.display = "none";
document.getElementById("movedivid").style.height = "26px";
}
function ChatShow() {
document.getElementById("movedivid").style.display = "block";
document.getElementById("movedivid").style.height = "400px";
document.getElementById("div2").style.display = "block";
}
function ChatClose() {
document.getElementById("movedivid").style.display = "none";
}
var drag_ = false
var D = new Function('obj', 'return document.getElementById(obj);');
var oevent = new Function('e', 'if (!e) e = window.event;return e');
function Move_obj(obj) {
var x, y;
D("main").onmousedown = function(e) {
drag_ = true;
with (this) {
D("main").style.position = "absolute";
var temp1 = D("movedivid").offsetLeft; //距离左边的初始值
var temp2 = D("movedivid").offsetTop; //距离顶边的初始值
x = oevent(e).clientX;
y = oevent(e).clientY;
document.onmousemove = function(e) {
if (!drag_) {
return false;
}
with (this) {
D("movedivid").style.left = temp1 + oevent(e).clientX - x + "px"; //层离左边距的像素
D("movedivid").style.top = temp2 + oevent(e).clientY - y + "px"; //层离顶部距的像素
}
}
}
document.onmouseup = new Function("drag_=false");
}
}
</script>
</head>
<body >
<form id="form1" runat="server">
<div>
<asp:ListBox ID="ListBox1" runat="server" Height="272px" Width="756px" ForeColor="#99CCFF">
</asp:ListBox>
<div id="movedivid" style="position: absolute; z-index: 1; background-color: #A0B4DC;
500px; height: 400px; left: 35%; top: 10%">
<div id="main" onmousedown="Move_obj('movedivid')" style="cursor: move; 480px;height: 25px;
display: inline;">
<div id="div3" style="display: inline; float: left; 400px;">
<strong style="color: #FFFFFF;"> CL层自制</strong></div>
<div id="div4" style="display: inline; float: right">
<strong style="color: #FFFFFF"><a href="#" onclick="ChatClose();">Ｘ</a> </strong></div>
<div id="div5" style="display: inline; float: right">
<strong style="color: #FFFFFF"><a href="#" onclick="ChatShow();">＋</a> </strong></div>
<div id="div6" style="display: inline; float: right">
<a href="#" onclick="ChatHidden();"><strong style="color: #FFFFFF;">— </strong></a></div>
</div>
<div id="div2" style="background-color: #D9FDFF; padding-bottom: 0px; position: relative;
498px; top: 25px; height: 374px; margin: 0 auto;">
内容
</div>
</div>
</div>
</form>
</body>
</html>