js实现div在页面拖动效果
本文实例讲述了js实现div在页面拖动效果。分享给大家供大家参考，具体如下：
<styletype="text/css">
body{
margin:0px;
}
#div1{
display:none;
position:absolute;
z-index:1000;
height:100%;
width:100%;
background:#000000;
filter:Alpha(opacity=30);
}
#div2{
display:none;
position:absolute;
height:100%;
width:100%;
padding-top:10%;
z-index:1001;
}
#div3{
display:block;
position:absolute;
z-index:999;
}
</style>
<scripttype="text/javascript">
//定义移动对象和移动坐标
varMouse_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为被拖动对象
functionm(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>
<divid="div1"></div>
<divid="div2"onmousedown="m(this.id)"style="left:0px;top:0px;">
<tablewidth="50%"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="left">
<trstyle="cursor:move;">
<td><fontcolor="#FFFFFF">温馨提示：</font></td>
<tdalign="right"><inputtype="button"value="ｘ"
onClick="document.getElementById
('div1').style.display='none';document.getElementById
('div2').style.display='none';"style="cursor:hand;"></td>
</tr>
<tr>
<tdcolspan="2"width="100%"bgcolor="#FFFFFF"height="150"
align="middle">欢迎访问<ahref="https://www.nhooo.com">https://www.nhooo.com</a></td>
</tr>
</table>
</div>
<divid="div3"><inputtype="button"value="打开层"
onClick="document.getElementById
('div1').style.display='block';document.getElementById
('div2').style.display='block';"></div>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。