拖动层效果

< html >
< head >
< style type ="text/css" > ...
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 : 200px0px0px300px ;
z-index : 1001 ;
}

#div3 {...} {
display : block ;
position : absolute ;
z-index : 999 ;
}

</ style >

< script type ="text/javascript" > ...
// 定义移动对象和移动坐标
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 >
< div id ="div1" style ="display:none" ></ div >
< div id ="div2" style ="left:0px;top:0px;display:none" >
< 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" >
< tr style ="cursor:move;" onmousedown ="m('div2')" >
< td >< font color ="#FFFFFF" > 温馨提示： </ font ></ td >
< 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 >