兼容IE FF 浮动层实现方法
兼容ie ff 浮动层实现方法
<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="网页特效" 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;
width: 500px; height: 400px; left: 35%; top: 10%">
<div id="main" onmousedown="move_obj('movedivid')" style="cursor: move; width: 480px;height: 25px;
display: inline;">
<div id="div3" style="display: inline; float: left;width: 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;
width: 498px; top: 25px; height: 374px; margin: 0 auto;">
内容
</div>
</div>
</div>
</form>
</body>
</html>
补充：Css教程,常用代码 
