JavaScript--学做遮罩层

来源：互联网发布：时间序列预测最新算法编辑：程序博客网时间：2024/05/17 21:35

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>