南强小屋 Design By 杰米
效果图:(灰色区域可拖动)
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} .div{ width:100px; height:100px; position:absolute;left:100px; top:100px; background:#ccc;} </style> </head> <body> <div class="div"> </div> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; var zIndex = 6; drag(div); div.ondblclick = function() { alert("ok"); }; function drag(oDrag) { var disX = dixY = 0; oDrag.onmousedown = function(event) { var event = event || window.event; disX = event.clientX - this.offsetLeft; disY = event.clientY - this.offsetTop; var oTemp = this.cloneNode(true); document.body.appendChild(oTemp); document.onmousemove = function(event) { var event = event || window.event; var iL = event.clientX - disX; var iT = event.clientY - disY; var maxL = document.documentElement.clientWidth - oDrag.offsetWidth; var maxT = document.documentElement.clientHeight - oDrag.offsetHeight; iL <= 0 && (iL = 0); iT <= 0 && (iT = 0); iL >= maxL && (iL = maxL); iT >= maxT && (iT = maxT); oTemp.style.zIndex = zIndex++; oTemp.style.opacity = "0.5"; oTemp.style.filter = "alpha(opacity=50)"; oTemp.style.left = iL + "px"; oTemp.style.top = iT + "px"; return false; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; oDrag.style.opacity = oTemp.style.opacity; var arr = { left: oTemp.offsetLeft, top: oTemp.offsetTop }; oDrag.style.zIndex = oTemp.style.zIndex; oAnimate(oDrag, arr, 300, function() { document.body.removeChild(oTemp); }); oDrag.releaseCapture && oDrag.releaseCapture() }; this.setCapture && this.setCapture(); return false } } function oAnimate(obj, params, time, handler) { var node = typeof obj == "string" "left" || n == "top") { var _old = parseInt(_style[n]); var _new = parseInt(params[n]); var _length = 0, _tt = 10; if (!isNaN(_old)) { var count = _old; var length = _old <= _new "px"; count = _old <= _new "px"; clearInterval(anim); if (handleFlag) { handler(); handleFlag = false; } } }, _tt); } } })(); } } </script> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无JavaScript拖动层Div代码的评论...