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 ? 0 : iL;<br />   iL = iL > maxL ? maxL : iL;   <br />   iT = iT < 0 ? 0 : iT;<br />   iT = iT > maxT ? 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程式設計有所幫助。