首页 > 文章 > web前端 > js 弹出层并可以拖拽_javascript技巧

js 弹出层并可以拖拽_javascript技巧

WBOY原创: 2016-05-16 18:04:51908浏览

}; 
oClose.onmousedown = function (event) 
{ 
(event || window.event).cancelBubble = true; 
}; 
oH2.onmousedown = function (event) 
{ 
var event = event || window.event; 
bDrag = true; 
disX = event.clientX - oWin.offsetLeft; 
disY = event.clientY - oWin.offsetTop; 
this.setCapture && this.setCapture(); 
return false 
}; 
document.onmousemove = function (event) 
{ 
if (!bDrag) return; 
var event = event || window.event; 
var iL = event.clientX - disX; 
var iT = event.clientY - disY; 
var maxL = document.documentElement.clientWidth - oWin.offsetWidth; 
var maxT = document.documentElement.clientHeight - oWin.offsetHeight; 
iL = iL < 0 ? 0 : iL; 
iL = iL > maxL ? maxL : iL; 
iT = iT < 0 ? 0 : iT; 
iT = iT > maxT ? maxT : iT;

oWin.style.marginTop = oWin.style.marginLeft = 0; 
oWin.style.left = iL + "px"; 
oWin.style.top = iT + "px"; 
return false 
}; 
document.onmouseup = window.onblur = oH2.onlosecapture = function () 
{ 
bDrag = false; 
oH2.releaseCapture && oH2.releaseCapture(); 
}; 
}; 
</script> 
 
 
<div id="overlay"></div> 
<div id="win"><h2><span id="close">×</span></h2></div> 
<center><button>弹出层</button></center>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：JQuery获取当前屏幕的高度宽度的实现代码_jquery下一篇：Jquery进度条插件 Progress Bar小问题解决_jquery

查看更多

js 弹出层 并可以拖拽_javascript技巧

相关文章

js 弹出层并可以拖拽_javascript技巧