javascript:浮動div，可拖拽div,遮罩層(div和iframe實現)

在網頁中，經常需要標題裏提到的幾種效果，實現比較簡單，這裏總結一下（IE測試通過），以備日後再用。
預備知識：網頁中的高和寬

//獲取瀏覽器的寬和高（多種瀏覽器）
 function getNavWidthandHeightInfo()
 {
     var s = "";
     s += " 網頁可見區域寬："+ document.body.clientWidth;
     s += " 網頁可見區域高："+ document.body.clientHeight;
     s += " 網頁可見區域寬："+ document.body.offsetWidth + " (包括邊線和滾動條的寬)";
     s += " 網頁可見區域高："+ document.body.offsetHeight + " (包括邊線的寬)";
     s += " 網頁正文全文寬："+ document.body.scrollWidth;
     s += " 網頁正文全文高："+ document.body.scrollHeight;
     s += " 網頁被捲去的高(ff)："+ document.body.scrollTop;
     s += " 網頁被捲去的高(ie)："+ document.documentElement.scrollTop;
     s += " 網頁被捲去的左："+ document.body.scrollLeft;
     s += " 網頁正文部分上："+ window.screenTop;
     s += " 網頁正文部分左："+ window.screenLeft;
     s += " 屏幕分辨率的高："+ window.screen.height;
     s += " 屏幕分辨率的寬："+ window.screen.width;
     s += " 屏幕可用工作區高度："+ window.screen.availHeight;
     s += " 屏幕可用工作區寬度："+ window.screen.availWidth;
     s += " 你的屏幕設置是: "+ window.screen.colorDepth +" 位彩色";
     s += " 你的屏幕設置: "+ window.screen.deviceXDPI +" 像素/英寸";
     s += "當前窗口的內部寬度:"+ window.innerWidth;
     s += "當前窗口的內部高度:"+ window.innerHeight;     
     //alert (s);
 }
 getNavWidthandHeightInfo();

另外，網頁中的元素常見定位需要用到的概念一併總結一下：

HTML中的元素定位:
 
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離 
 scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離 
 
scrollWidth:獲取對象的滾動寬度 
 scrollHeight: 獲取對象的滾動高度
 
offsetLeft:獲取對象相對於版面或由 offsetParent屬性指定的父座標的計算左側位置 
 offsetTop:獲取對象相對於版面或由 offsetParent屬性指定的父座標的計算頂端位置
 offsetHeight:獲取對象相對於版面或由父座標 offsetParent屬性指定的父座標的高度  
 
event.clientX 相對文檔的水平座標 
 event.clientY 相對文檔的垂直座標 
 
event.offsetX 相對容器的水平座標 
 event.offsetY 相對容器的垂直座標 
 
document.documentElement.scrollTop 垂直方向滾動的值 
 
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量 
 
(注意：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)

來看一下筆者寫的關於定位和關於寬和高的js函數：來看一下筆者寫的關於定位和關於寬和高的js函數：來看一下筆者寫的關於定位和關於寬和高的js函數：

/* 關於位置 (前面兩種常用) */
 
//1.取鼠標的位置(Coordinate 座標x和y) 兼容IE,FF和其他主流瀏覽器 (οnmοuseοver="getMouseCoordinate(event)")
 function getMouseCoordinate(ev) {
     var e = ev ? ev : (window.event ? window.event : null);
     if (e.pageX || e.pageY) {
         alert("x:" + e.pageX + "--y:" + e.pageY);
     }
     else {
         alert("x:" + event.x + "--y:" + event.y);
     }
 }
 
//2.通過控件獲取控件在頁面的位置 (oControl是控件)
 function getControlCoordinateByControl(oControl) {
     var leftPos = oControl.offsetLeft;
     var topPos = oControl.offsetTop;
     var height = oControl.offsetHeight;
     while (oControl = oControl.offsetParent) {
         leftPos += oControl.offsetLeft;
         topPos += oControl.offsetTop;
     }
     alert("x:" + leftPos + "--y:" + topPos);
 }
 
//3.通過控件自身取得控件的寬和高,返回width和height
 function getControlWidthAndHeightByControl(oControl) {
     //var width = oControl.style.width;
     //var height = oControl.style.height;
     var width = oControl.offsetWidth;
     var height = oControl.offsetHeight;
     alert("width:" + width + "--height:" + height);
 }

PS：關於dom的一些高和寬，下面這張圖有助於我們理解的更清楚：PS：關於dom的一些高和寬，下面這張圖有助於我們理解的更清楚：

一：浮動div的實現

//floatDiv.js
 function MoveFloatLayer() {
     var x = document.documentElement.clientWidth / 2;
     var y = document.documentElement.clientHeight / 2;
     var docuTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
     var y = docuTop + y;
     var divTopBar = document.getElementById("divFloat");
     //    divTopBar.style.left = x;
     //    divTopBar.style.top = y;
     divTopBar.style.pixelLeft = x;
     divTopBar.style.pixelTop = y;
 
    //alert("now x:" + x + " & now y:" + y);
 }
 
function initialFloatDiv() {
     window.setInterval(MoveFloatLayer, 20);
 }
 
window.onload = initialFloatDiv;

Float.aspx文件：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FloatDiv.aspx.cs" Inherits="WebTest2008.FloatDiv" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head><title>浮動div</title>
  <script src="js/floatDiv.js" type="text/javascript"></script>
 </head>
  <form id="form1" runat="server">
  <div id="divFloat" style="position: absolute; width: 215px; z-index: 1; background:#cef">
  測試！
  </div>
  
  <div>
  test test test<br />
  test test test<br />
  test test test<br />
  </div>
  </form>
 </html>

//dragDiv.js
 // 實現可拖動的div
 var px = 0;
 var py = 0;
 var begin = false;
 //是否要開啓透明效果
 var enableOpacity = false; // 默認不允許
 var myDragDiv;
 function down(oDiv) {
     myDragDiv = oDiv;
     begin = true;
     oDiv.style.cursor = "hand";
     event.srcElement.setCapture();
     px = oDiv.style.pixelLeft - event.x;
     py = oDiv.style.pixelTop - event.y;
 }
 function document.onmousemove() {
     if (myDragDiv != null && typeof (myDragDiv) != "undefined") {
         if (begin) {
             if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=30)"; }  // 濾鏡 
             myDragDiv.style.pixelLeft = px + event.x;
             myDragDiv.style.pixelTop = py + event.y;
         }
     }
 }
 function document.onmouseup() {
     if (myDragDiv != null && typeof (myDragDiv) != "undefined") {
         begin = false;
         if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=100)"; } // 濾鏡 
         myDragDiv.style.cursor = "default";
         event.srcElement.releaseCapture();
         myDragDiv = null;
     }
 }

上面的js怎麼用呢？看到down函數的方式你就會猜到一些端倪，好了，看html文件吧：

<html>
 <head>
  <title>Drag Div</title>
  <script src="js/dragDiv.js" type="text/javascript"></script>
 </head>
 <body>
  <div id="divDrag" style="position: absolute; width: 160px;height:100px;z-index: 1; background:#cef">
  按下鼠標拖動
  </div>
 </body>
 </html>

對比浮動div的style，你看到相同點了嗎？沒錯，就是position的那些事兒...
三、遮罩層(div和iframe實現)
下面兩個js（myLightBoxDiv.js和myLightBoxFrame.js）介紹遮罩層的不同實現思路，本來可以整合在一起，爲了條例清晰把它們分成兩個js文件，它們的效果其實是一樣的。
（1）div的實現方式
對比浮動div的style，你看到相同點了嗎？沒錯，就是position的那些事兒...
三、遮罩層(div和iframe實現)
下面兩個js（myLightBoxDiv.js和myLightBoxFrame.js）介紹遮罩層的不同實現思路，本來可以整合在一起，爲了條例清晰把它們分成兩個js文件，它們的效果其實是一樣的。
（1）div的實現方式

var isIE = (document.all) ? true : false; //document.all 只有ie支持此屬性
 var ieVersion = 7; //IE版本，默認爲7
 if (isIE) {
     ieVersion = parseFloat(navigator.appVersion.split("MSIE")[1]);
 }
 var de = getBodyObj();
 function getBodyObj() {
     return (document.documentElement) ? document.documentElement : document.body;
 }
 function resetCSS(elem, prop) { for (var i in prop) { elem.style[i] = prop[i]; } }
 //滾動條位置
 function scrollX() { return self.pageXOffset || de && de.scrollLeft || document.body.scrollLeft; }
 function scrollY() { return self.pageYOffset || de && de.scrollTop || document.body.scrollTop; }
 //可視尺寸
 function windowW() { return self.innerWidth || de && de.clientWidth || document.body.clientWidth; }
 function windowH() { return self.innerHeight || de && de.clientHeight || document.body.clientHeight; }
 //頁面尺寸（最小不小於可視尺寸）
 function pageW() { var s = document.body.scrollWidth; var c = windowW(); return s > c ? s : c; }
 function pageH() { var s = document.body.scrollHeight; var c = windowH(); return s > c ? s : c; }
 //lightbox顯示和隱藏
 function createDivOverLayer(w, h) {
     //內容
     var tempInnerHtml = "<div id=\"divOverProgress\" style='width:400px;height:250px;margin:0 auto;position:absolute;top:0px;padding-top:8px;text-align:right;background-color:#fff;border:8px solid #8F8F8F;' title='按住鼠標可以拖動' onmousedown = \"down(this)\">";
     tempInnerHtml += "<span id=\"spanCloseLightBox\" οnclick=\"closeLightBox()\" style=\"cursor: pointer; color: Blue\">關閉</span><br/>";
     tempInnerHtml += "<div style=\"margin-top: 90px; text-align: center\"><a href=\"#\" οnclick=\"alert('confirm')\">確定</a><a href=\"#\" οnclick=\"closeLightBox()\">取消</a></div>";
     tempInnerHtml += "</div>";
     //建立lightbox
     var over = document.createElement("div");
     over.id = "myLightBoxLayer";
     var over2 = document.createElement("div");
     over2.id = "myProcessLayer";
     document.body.appendChild(over);
     document.body.appendChild(over2);
     //重設lightbox尺寸和位置
     function resetOver() {
         //設定遮掩層尺寸
         resetCSS(over, { position: "absolute", zIndex: "998", top: "0px", left: "0px", backgroundColor: "gray", opacity: "0.5", filter: "alpha(opacity=80)", width: pageW() + "px", height: pageH() + "px" });
 
        //設定彈出層尺寸和位置
         var eh = windowH() - h;
         var ew = windowW() - w;
         eh = eh < 0 ? 0 : eh;
         ew = ew < 0 ? 0 : ew;
         if (ieVersion != 7)
             resetCSS(over2, { position: "absolute", zIndex: "999", width: w + "px", height: h + "px", left: scrollX() + parseInt(ew / 2) + "px", top: scrollY() + parseInt(eh / 2) + "px", overFlow: "hidden", filter: "alpha(opacity=0)" });
         else
             resetCSS(over2, { position: "absolute", zIndex: "999", width: w + "px", height: h + "px", left: scrollX() + parseInt(ew / 2) + "px", top: scrollY() + parseInt(eh / 2) + "px", overFlow: "hidden" });
     };
     resetOver();
     window.onresize = resetOver;
     window.onscroll = resetOver;
     if (ieVersion != 7) { //將所有select置爲不可用
         var oSelects = document.getElementsByTagName("select");
         for (var i = 0; i < oSelects.length; i++) {
             oSelects[i].disabled = true;
             oSelects[i].style.visibility = "hidden";
         }
     }
     over2.innerHTML = tempInnerHtml;
 }
 
//點擊關閉lightbox
 function closeLightBox() {
     var over = document.getElementById("myLightBoxLayer");
     var over2 = document.getElementById("myProcessLayer");
     document.body.removeChild(over);
     document.body.removeChild(over2);
     if (ieVersion != 7) { //將所有select置爲可用
         var oSelects = document.getElementsByTagName("select");
         for (var i = 0; i < oSelects.length; i++) {
             oSelects[i].disabled = false;
             oSelects[i].style.visibility = "visible";
         }
     }
 }

上面的js裏讓遮罩層over2設置爲浮動，下面的html可以讓你測試滾動情況下的可以拖動的遮罩效果。

<html>
 <head>
  <title>Cover Layer</title>
  <script src="js/myLightBoxDiv.js" type="text/javascript"></script>
  <script src="js/dragDiv.js" type="text/javascript"></script>
 </head>
 <body>
  <select id="Select1">
   <option>test test test test test</option>
  </select>
  <br />
  <select id="Select2" multiple="multiple">
   <option>test test test test test</option>
  </select>
 <span style="cursor:pointer; color:Blue" id="testtest" οnclick="createDivOverLayer(400, 400)">測試</span>
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <span style="cursor:pointer; color:Blue" id="Span1" οnclick="createDivOverLayer(400, 400)">測試</span>
 </body>
 </html>

(2)IFrame實現方式
同上，複製下面代碼試試看效果吧

//myLightBoxFrame.js
 var isIE = (document.all) ? true : false; //document.all 只有ie支持此屬性
 var ieVersion = 7; //IE版本，默認爲7
 if (isIE) {
     ieVersion = parseFloat(navigator.appVersion.split("MSIE")[1]);
 }
 var de = getBodyObj();
 function getBodyObj() {
     return (document.documentElement) ? document.documentElement : document.body;
 }
 function resetCSS(elem, prop) { for (var i in prop) { elem.style[i] = prop[i]; } }
 //滾動條位置
 function scrollX() { return self.pageXOffset || de && de.scrollLeft || document.body.scrollLeft; }
 function scrollY() { return self.pageYOffset || de && de.scrollTop || document.body.scrollTop; }
 //可視尺寸
 function windowW() { return self.innerWidth || de && de.clientWidth || document.body.clientWidth; }
 function windowH() { return self.innerHeight || de && de.clientHeight || document.body.clientHeight; }
 //頁面尺寸（最小不小於可視尺寸）
 function pageW() { var s = document.body.scrollWidth; var c = windowW(); return s > c ? s : c; }
 function pageH() { var s = document.body.scrollHeight; var c = windowH(); return s > c ? s : c; }
 //lightbox顯示和隱藏
 function createFrameOverLayer(w, h, href) {
     //內容
     var tempInnerHtml = "<div id=\"divProcessHead\" style='width:100%;margin:0 auto;position:absolute;top:0px;padding-top:8px;text-align:right;background-color:#fff' id='overprogress'>";
     tempInnerHtml += " <span id=\"spanCloseLightBox\" οnclick=\"closeLightBox()\" style=\"cursor: pointer; color: Blue\">關閉</span></div>";
     tempInnerHtml += " <iframe scrolling='no' frameborder='0' src='" + href + "' width='100%' height='100%'></iframe>";
     //建立lightbox
     var over = document.createElement("div");
     over.id = "myLightBoxLayer";
     var over2 = document.createElement("div");
     over2.id = "myProcessLayer";
     document.body.appendChild(over);
     document.body.appendChild(over2);
     //重設lightbox尺寸和位置
     function resetOver() {
         //設定遮掩層尺寸
         resetCSS(over, { position: "absolute", zIndex: "998", top: "0px", left: "0px", backgroundColor: "gray", opacity: "0.5", filter: "alpha(opacity=80)", width: pageW() + "px", height: pageH() + "px" });
 
        //設定彈出層尺寸和位置
         var eh = windowH() - h;
         var ew = windowW() - w;
         eh = eh < 0 ? 0 : eh;
         ew = ew < 0 ? 0 : ew;
         resetCSS(over2, { position: "absolute", zIndex: "999", width: w + "px", height: h + "px", left: scrollX() + parseInt(ew / 2) + "px", top: scrollY() + parseInt(eh / 2) + "px", overFlow: "hidden" });
         // over2.onmousedown = "down(this)";
     };
     resetOver();
     window.onresize = resetOver;
     window.onscroll = resetOver;
     if (ieVersion != 7) { //將所有select置爲不可用
         var oSelects = document.getElementsByTagName("select");
         for (var i = 0; i < oSelects.length; i++) {
             oSelects[i].disabled = true;
         }
     }
     over2.innerHTML = tempInnerHtml;
 }
 
//點擊關閉lightbox
 function closeLightBox() {
     var over = document.getElementById("myLightBoxLayer");
     var over2 = document.getElementById("myProcessLayer");
     document.body.removeChild(over);
     document.body.removeChild(over2);
     if (ieVersion != 7) { //將所有select置爲可用
         var oSelects = document.getElementsByTagName("select");
         for (var i = 0; i < oSelects.length; i++) {
             oSelects[i].disabled = false;
         }
     }
 }

html代碼：

//JsTest.html
 <html>
 <head>
  <title>Cover Layer</title>
  <script src="js/myLightBoxFrame.js" type="text/javascript"></script>
  <script src="js/dragDiv.js" type="text/javascript"></script>
 </head>
 <body>
  <select id="Select1">
   <option>test test test test test</option>
  </select>
  <br />
  <select id="Select2" multiple="multiple">
   <option>test test test test test</option>
  </select>
 <span style="cursor:pointer; color:Blue" id="testtest" οnclick="createFrameOverLayer(400, 400,'myJsTest.htm')">測試</span>
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
 <span style="cursor:pointer; color:Blue" id="Span1" οnclick="createFrameOverLayer(400, 400,'myJsTest.htm')">測試</span>
 </body>
 </html>
 
//第二個html文件，myJsTest.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
 <head>
  <title></title>
 </head>
 <body>
  <div style="margin-top: 80px; text-align: center">
   <a href="#" οnclick="alert('confirm')">確定</a><a href="#" οnclick="alert('cancel')">取消</a>
  </div>
 </body>
 </html>

注意上面的html代碼裏包含兩個html文件，主文件是jsTest.html,iframe的src引用的是myJsTest.html文件.總結介紹結束了。^_^
PS:歡迎志同道合的園友共同總結和討論常見js特效，有好資源一定共享啊，前幾天發現一個，http://www.scriptlover.com/controls/，真好資源也。

gcz564539969

發佈了11 篇原創文章 · 獲贊 1 · 訪問量 6萬+

私信關注

javascript:浮動div，可拖拽div,遮罩層(div和iframe實現)

再談23種設計模式（3）：行爲型模式（學習筆記）

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

javascript對iframe的互操作淺析

javascript對iframe的互操作淺析

MyEclipse快捷鍵大全

Struts的url-pattern配置問題

Java實現對文件的壓縮和解壓縮

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結