JS弹出可拖拽可关闭的div层完整实例_javascript技巧

本文实例讲述了JS弹出可拖拽可关闭的div层完整实现方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:

<script><br /> window.onload = function ()<br /> {<br /> var oWin = document.getElementById("win");<br /> var oBtn = document.getElementsByTagName("button")[0];<br /> var oClose = document.getElementById("close");<br /> var oH2 = oWin.getElementsByTagName("h2")[0];<br /> var bDrag = false;<br /> var disX = disY = 0;<br /> oBtn.onclick = function ()<br /> {<br /> oWin.style.display = "block" <br /> };<br /> oClose.onclick = function ()<br /> {<br /> oWin.style.display = "none"<br /> <br /> };<br /> oClose.onmousedown = function (event)<br /> {<br /> (event || window.event).cancelBubble = true;<br /> };<br /> oH2.onmousedown = function (event)<br /> { <br /> var event = event || window.event;<br /> bDrag = true;<br /> disX = event.clientX - oWin.offsetLeft;<br /> disY = event.clientY - oWin.offsetTop; <br /> this.setCapture && this.setCapture(); <br /> return false<br /> };<br /> document.onmousemove = function (event)<br /> {<br /> if (!bDrag) return;<br /> var event = event || window.event;<br /> var iL = event.clientX - disX;<br /> var iT = event.clientY - disY;<br /> var maxL = document.documentElement.clientWidth - oWin.offsetWidth;<br /> var maxT = document.documentElement.clientHeight - oWin.offsetHeight; <br /> iL = iL < 0 &#63; 0 : iL;<br /> iL = iL > maxL &#63; maxL : iL; <br /> iT = iT < 0 &#63; 0 : iT;<br /> iT = iT > maxT &#63; maxT : iT;<br /> <br /> oWin.style.marginTop = oWin.style.marginLeft = 0;<br /> oWin.style.left = iL + "px";<br /> oWin.style.top = iT + "px"; <br /> return false<br /> };<br /> document.onmouseup = window.onblur = oH2.onlosecapture = function ()<br /> {<br /> bDrag = false; <br /> oH2.releaseCapture && oH2.releaseCapture();<br /> };<br /> };<br /> </script>

×

弹出层

希望本文所述对大家的javascript程序设计有所帮助。