可以移动的漂浮层
代码信息1
===========================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>拖动层/双击关闭层/单击层优先</title>
<script type="text/javascript">
function changeIndex(me){
if(changeIndex.top)
changeIndex.top.style.zIndex="";
me.style.zIndex=500;
changeIndex.top=me;
}
</script>
<script type="text/javascript">
function change(me)
{
me.style.display="none";
}
</script>
<SCRIPT LANGUAGE="JavaScript">
function neverDragDivision(fObj)
{
with (this){ if (!fObj) return; this.bDraged = false;
this.oDragOrig = fObj; oDragOrig.style.cursor = "move";
oDragOrig.onmousedown = function()
{
var ofs = Offset(oDragOrig);
oDragOrig.style.position = "absolute";
oDragOrig.style.left = ofs.l;
oDragOrig.style.top = ofs.t;
oDragOrig.X = event.clientX - ofs.l;
oDragOrig.Y = event.clientY - ofs.t;
bDraged = true;
};
oDragOrig.onmousemove = function()
{
if (!bDraged) return;
oDragOrig.setCapture();
oDragOrig.style.left = event.clientX - oDragOrig.X;
oDragOrig.style.top = event.clientY - oDragOrig.Y;
};
oDragOrig.onmouseup = function()
{
bDraged = false;
oDragOrig.releaseCapture(); };
function Offset(e)
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return { t:t, l:l, w:w, h:h }
};
}
};
</SCRIPT>
</head>
<body>
<div id="aaa" style="position:absolute; width:209px; height:192px; background-color:#99FFFF; left: 341px; top: 239px;" onclick="changeIndex(this)" onDblClick="change(this)"></div>
<div id="bbb" style="position:absolute; width:209px; height:192px; background-color:#CC00FF; left: 579px; top: 324px;" onclick="changeIndex(this)" onDblClick="change(this)"></div>
<div id="bbb" style="position:absolute; width:209px; height:192px; background-color:#33FFFF; left: 649px; top: 161px;" onclick="changeIndex(this)" onDblClick="change(this)"></div>
<div id="ccc" style="position:absolute; width:209px; height:192px; background-color:#FFCC66; left: 246px; top: 177px;" onclick="changeIndex(this)" onDblClick="change(this)"></div>
<div id="ddd" style="position:absolute; width:209px; height:192px; background-color:#33FF66; left: 453px; top: 404px;" onclick="changeIndex(this)" onDblClick="change(this)"></div>
<div id="eee" style="position:absolute; width:209px; height:192px; background-color:#33CCCC; left: 472px; top: 82px;" onclick="changeIndex(this)" onDblClick="change(this)"></div>
<div id="fff" style="position:absolute; width:209px; height:192px; background-color:#9966FF; left: 758px; top: 227px;" onclick="changeIndex(this)" onDblClick="change(this)"></div>
<SCRIPT LANGUAGE="JavaScript">
var aDivs = document.getElementsByTagName("DIV");
for (var i=0; i<aDivs.length; i++)
{
new neverDragDivision(aDivs[i]);
}
</SCRIPT>
</body>
</html>
===========================================================================
代码信息2
===========================================================================
放置在head里面
<style type="text/css">
<!--
#Upload_Panel {
filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#cccccc,OffX=5, OffY=5,Positive=1);background:#F5F5F5; position:absolute;left:466px;top:152px;border:#666666 1px solid;width:150px;height:180px;display:none;
}
-->
</style>
加注在body里面
DIV样式：
<div id="Upload_Panel" style="left: 7px; top: 68px; cursor:move" onmousedown="beforDrag(Upload_Panel)" onmousemove="Drag(Upload_Panel)" onmouseup="endDrag(Upload_Panel)" onmouseout="endDrag(Upload_Panel)"></div>
JS代码：
<script type="text/javascript" language="JavaScript">
var drag=false,offsetX=0,offsetY=0;
function beforDrag(divid)
{
offsetX=document.body.scrollLeft+event.clientX-divid.style.pixelLeft;
offsetY=document.body.scrollTop+event.clientY-divid.style.pixelTop;
drag=true;
}
function Drag(divid)
{
if(!drag)
return;
divid.style.pixelLeft=document.body.scrollLeft+event.clientX-offsetX;
divid.style.pixelTop=document.body.scrollTop+event.clientY-offsetY;
}
function endDrag(divid)
{
drag=false;
}
</script>
浙公网安备 33010602011771号