JavaScript–學做遮罩層

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

dom-drag.js 如下：

/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
* Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/

var Drag = {

obj : null,

init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;

o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;

o.root = oRoot && oRoot != null ? oRoot : o ;

  if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left   = "0px";
  if (o.vmode && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
  if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
  if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

  o.minX = typeof minX != 'undefined' ? minX : null;
  o.minY = typeof minY != 'undefined' ? minY : null;
  o.maxX = typeof maxX != 'undefined' ? maxX : null;
  o.maxY = typeof maxY != 'undefined' ? maxY : null;

o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;

  o.root.onDragStart = new Function();
  o.root.onDragEnd = new Function();
  o.root.onDrag  = new Function();
},

start : function(e)
{
  var o = Drag.obj = this;
  e = Drag.fixE(e);
  var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
  var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
  o.root.onDragStart(x, y);

o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;

  if (o.hmode) {
   if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
   if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
  } else {
   if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
   if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
  }

  if (o.vmode) {
   if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
   if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
  } else {
   if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
   if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
  }

document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;

return false;
},

drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;

  var ey = e.clientY;
  var ex = e.clientX;
  var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
  var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
  var nx, ny;

  if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
  if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
  if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
  if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)

  Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
  Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
  Drag.obj.lastMouseX = ex;
  Drag.obj.lastMouseY = ey;

Drag.obj.root.onDrag(nx, ny);
return false;
},

end : function()
{
  document.onmousemove = null;
  document.onmouseup   = null;
  Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
         parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
  Drag.obj = null;
},

fixE : function(e)
{
  if (typeof e == 'undefined') e = window.event;
  if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
  if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
  return e;
}
};

頁面代碼如下：

<!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>
<title>遮罩層</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="Designer" content="cssrain" />
<meta name="Designer mail" content="cssrain@gmail.com" />
<meta name="Keywords" content="遮罩層" />
<meta name="Description" content="遮罩層" />
<style>
*{padding:0; margin:0} /*此行樣式一定要加，不然可能會引起BUG出現。*/

#MyDiv{
 position:absolute;
 width:200px;
 height:200px;
 font-size:12px;
 background:#666;
 border:1px solid #000;
 z-index:10001;
 display:none;
 text-align:center;
}
</style>
<script src="dom-drag.js" type="text/javascript"></script>
<script language="javascript" >
//建立遮罩層
function AlertMsg(){

    /**第一步：建立DIV遮罩層。*/
  var sWidth,sHeight;
  sWidth = window.screen.availWidth;
  //螢幕可用工作區高度： window.screen.availHeight;
  //螢幕可用工作區寬度： window.screen.availWidth;
  //網頁本文全文寬：     document.body.scrollWidth;
  //網頁本文全文高：     document.body.scrollHeight;
  if(window.screen.availHeight > document.body.scrollHeight){ //當高度少於一屏
   sHeight = window.screen.availHeight;
  }else{//當高度大於一屏
   sHeight = document.body.scrollHeight;
  }
  //建立遮罩背景
  var maskObj = document.createElement("div");
  maskObj.setAttribute('id','BigDiv');
  maskObj.style.position = "absolute";
  maskObj.style.top = "0";
  maskObj.style.left = "0";
  maskObj.style.background = "#777";
  maskObj.style.filter = "Alpha(opacity=30);";
  maskObj.style.opacity = "0.3";
  maskObj.style.width = sWidth + "px";
  maskObj.style.height = sHeight + "px";
  maskObj.style.zIndex = "10000";
  document.body.appendChild(maskObj);

        /**第二步：動態設定div的上邊距和左邊距，使彈出div置中開啟。*/
        var MyDiv =document.getElementById("MyDiv");
  var MyDiv_w = getStyle(MyDiv,"width");
  var MyDiv_h = getStyle(MyDiv,"height");

  MyDiv_w = parseInt(MyDiv_w); //去掉單位 "px"
  MyDiv_h = parseInt(MyDiv_h);

  var width = pageWidth();
  var height = pageHeight();
  var left = leftPosition();
  var top = topPosition();

var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //計算上邊距
var Div_leftposition = left + (width / 2) - (MyDiv_w / 2); //計算左邊距

  MyDiv.style.left = Div_leftposition + "px"; //拼接上單位"px"
  MyDiv.style.top = Div_topposition + "px";
  MyDiv.style.display = "block"; //設定彈出div顯示
}

  /**第三步：關閉視窗和遮罩層。*/
function CloseDiv(){
  var Bigdiv = document.getElementById("BigDiv");
  var Mydiv = document.getElementById("MyDiv");
  document.body.removeChild(Bigdiv);
  Mydiv.style.display="none";
}
   /** 第四步：彈出層拖動。*/
window.onload = function(){
    if(document.getElementById("MyDiv")){
   var MyDiv = document.getElementById("MyDiv");
   var dragMe   = document.getElementById("dragMe");
   Drag.init(dragMe, MyDiv);
  }
}

      /**第五步：彈出層跟隨捲軸滾動。*/
window.onscroll = window_onscroll;
function window_onscroll(){
  var MyDiv =document.getElementById("MyDiv");
  var MyDiv_h = getStyle(MyDiv,"height");
  MyDiv_h = parseInt(MyDiv_h);
  var height = pageHeight();
  var top = topPosition();
  var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //計算上邊距
  MyDiv.style.top = Div_topposition + "px";
}

/**
下面都是常用函數，已經收錄在我的jsskep.js中。可以在裡面找到。
工程地址：http://code.google.com/p/jsskep/
**/
// 計算當前視窗的寬度 //
function pageWidth(){
return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

// 計算當前視窗的高度 //
function pageHeight(){
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

// 計算當前視窗的上邊捲軸//
function topPosition(){
return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}

// 計算當前視窗的左邊捲軸//
function leftPosition(){
return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}

//解決外嵌樣式style , 用js擷取不到的問題。
function getStyle(elem, name){
 if(elem.style[name])
 return elem.style[name];
 else if(elem.currentStyle) //ie
 return elem.currentStyle[name];
 else if(document.defaultView && document.defaultView.getComputedStyle){ //w3c
 name = name.replace(/([A-Z])/g,"-$1");
 name = name.toLowerCase();

 var s = document.defaultView.getComputedStyle(elem,"");
 return s && s.getPropertyValue(name);
 } else
 return null
}
</script>
</head>
<body>

<select></select>
open
 
 
open
 
 
open

<div id="MyDiv">
<input type="button" value="關閉" onclick="CloseDiv()"/>
<div id="dragMe" style="cursor:move;background:#ff6500">這裡才可以拖動.</div>
<input type="text" />
</div>

</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More