拖动层效果

来源：互联网发布：删除Mac本上的图片编辑：程序博客网时间：2024/05/16 06:13

很多网站都有这样一个功能，比如51job，它用的就是和这样差不多，当你点击一个事件时它会弹出一个层，而这个层是可以拖动的，代码如下：

<html>

<head>

body {

margin: 0px;

}

#div1 {

display: block;

position: absolute;

z-index: 1000;

height: 100%;

width: 100%;

background: #000000;

filter:Alpha(opacity=30);

}

#div2 {

display: block;

position: absolute;

height:10;

width: 600;

margin:200px 0px 0px 300px;

z-index: 1001;

}

#div3 {

display: block;

position: absolute;

z-index: 999;

}

</style>

//定义移动对象和移动坐标

var Mouse_Obj="none",_x,_y;

//拖动对象函数(自动)

document.onmousemove=function()

{

if(Mouse_Obj!=="none")

{

document.getElementById(Mouse_Obj).style.left=_x+event.x;

document.getElementById(Mouse_Obj).style.top=_y+event.y;

event.returnValue=false;

}

//停止拖动函数(自动)

document.onmouseup=function()

{

Mouse_Obj="none";

}

//确定被拖动对象函数 o为被拖动对象

function m(o)

{

Mouse_Obj=o;

_x=parseInt(document.getElementById(Mouse_Obj).style.left)-event.x;

_y=parseInt(document.getElementById(Mouse_Obj).style.top)-event.y;

}

</script>

</head>

<body>

<table width="100%" border="0" cellpadding="3" cellspacing="1"

style="background: #ff7300;

position:static;filter:progid:DXImageTransform.Microsoft.DropShadow

(color=#666666,offX=4,offY=4,positives=true)" align="center">

<td align="right"><input type="button" value="ｘ"

onClick="document.getElementById

('div1').style.display='none';document.getElementById

('div2').style.display='none';" style="cursor: hand;"></td>

</tr>

<tr>

<td colspan="2" width="100%" bgcolor="#FFFFFF" height="150"

align="middle">欢迎访问　<a href="http://levon.51.com"

target="_blank">http://Levon.51.com</a></td>

</tr>

</table>

</div>

<div id="div3"><input type="button" value="打开层"

onClick="document.getElementById

('div1').style.display='block';document.getElementById

('div2').style.display='block';"></div>

</body>

</html>