移动层实例

最新推荐文章于 2023-04-30 15:07:56 发布

koushenglong

最新推荐文章于 2023-04-30 15:07:56 发布

阅读量266

点赞数

分类专栏：其它文章标签： function javascript class border div

本文链接：https://blog.csdn.net/koushenglong/article/details/2582184

版权

其它专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<HTML><HEAD><TITLE>移动层实例</TITLE> <style> <!-- body { font-size:0.9em; font-family:verdana; background-color:appworkspace; }

.moveDiv { border:4px solid #006699; height:200px; width:400px; color:#003399; padding:20px; font-weight:bolder; text-align:center; background-color:#eeeeee; }

.copyright { text-align: center; font-size: 1em; } --> </style>

<SCRIPT LANGUAGE="JavaScript"> <!-- //定义函数divMove function divMove(divObj) { with (this) { if (!divObj) return; this.hasDraged = false; this.dragObj = divObj; // 把鼠标的形状改成移动形 dragObj.style.cursor = "move"; // 定义鼠标按下时的操作 dragObj.onmousedown = function() { var ofs = Offset(dragObj); dragObj.style.position = "absolute"; dragObj.style.left = ofs.l; dragObj.style.top = ofs.t; dragObj.X = event.clientX - ofs.l; dragObj.Y = event.clientY - ofs.t; hasDraged = true; };

// 定义鼠标移动时的操作 dragObj.onmousemove = function() { if (!hasDraged) return; dragObj.setCapture(); dragObj.style.left = event.clientX - dragObj.X; dragObj.style.top = event.clientY - dragObj.Y; }; // 定义鼠标提起时的操作 dragObj.onmouseup = function() { hasDraged = false; dragObj.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 } }; } };