这篇文章主要介绍了 js 实现 div 在页面拖动效果, 涉及 JavaScript 动态操作页面元素与数值计算的相关技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现 div 在页面拖动效果。分享给大家供大家参考,具体如下:
- <style type="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>
- <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>
- <div id="div1"></div>
- <div id="div2" onmousedown="m(this.id)" style="left: 0px;top: 0px;">
- <table width="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">
- <tr style="cursor: move;">
- <td><font color="#FFFFFF">温馨提示:</font></td>
- <td align="right"><input type="button" value="x"
- 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://www.phperz.com">http://www.phperz.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>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0224/266020.html