首页 / 脚本样式 / JavaScript / JS 遮照层实现代码

1.先上效果图：

2.使用方法：
初始化：Overlayer.Initialize（{ZIndex:100,Backgrund:#666,Opacity:80}）;
显示：Overlayer.Show（）;或Overlayer.Initialize（{ZIndex:100,Backgrund:#666,Opacity:80}）.Show（）;
关闭：Overlayer.Close（）;
3.代码如下：
公用函数：
复制代码 代码如下:
function GetDocumentObject（）
{
var obj;
if（document.compatMode=="BackCompat"）
{
obj=document.body;
}
else
{
obj=document.documentElement
}
return obj;
}
function GetPageSize（）
{
var obj = GetDocumentObject（）;
//alert（"pagesize:"+obj）;
with（obj）
{
return {width:（（scrollWidth>clientWidth）？scrollWidth:clientWidth）,height:（ （scrollHeight>clientHeight）？scrollHeight:clientHeight）}
}
}
var Extend = function（destination, source）
{
for （var property in source）
{
destination[property] = source[property];
}
};
var BindAsEventListener = function（object, fun）
{
var args = Array.prototype.slice.call（arguments）.slice（2）;
return function（event）
{
return fun.apply（object, [event || window.event].concat（args））;
}
}

遮照层代码：
复制代码 代码如下:
/*
遮照层
*/
var Overlayer=
{
//遮照层ID,这个是硬编码的
ID:"__DSKJOVERLAYER_BY_KEVIN",
//Z轴顺序
ZIndex:0,
//背景颜色
Background:"#333",
//透明度
Opacity:60,
//
Obj:""
};
/*
初始化
*/
Overlayer.Initialize=function（o）
{
//创建Html元素
this.Create（）;
//扩展属性赋值
Extend（this,o）;
//设置样式
this.SetStyleCss（）;
//附加事件
AddListener（window,"resize",BindAsEventListener（this,this.Resize））;
AddListener（window,"scroll",BindAsEventListener（this,function（）
{
this._PageSize=GetPageSize（）;
if（this._PageSize.height！=this._height）
{
this.Resize（）;
this._height=this._PageSize.height;
}
}））;
return this;
}
/*
创建HTML元素
*/
Overlayer.Create=function（）
{
//alert（"create"）;
var obj=$（this.ID）;
if（！obj）
{
obj = document.createElement（"div"）;
obj.id=this.ID;
obj.style.display="none";
document.body.appendChild（obj）;
}
this.Obj=obj;
}
/*
设置样式
*/
Overlayer.SetStyleCss=function（）
{
with（this.Obj.style）
{
position = "absolute";
background = this.Background;
left = "0px";
top = "0px";
this.Resize（）;
zIndex = this.ZIndex;
filter = "Alpha（Opacity="+this.Opacity+"）";//IE逆境
opacity = this.Opacity/100;//非IE
}
}
/*
窗口改变大小时重新设置宽度和高度
*/
Overlayer.Resize=function（）
{
if（this.Obj）
{
var size=GetPageSize（）;
this.Obj.style.width=size.width+"px";
this.Obj.style.height=size.height+"px";
}
}
/*
显示层
*/
Overlayer.Show=function（）
{
//alert（"show"+Overlayer.ID）;
if（this.Obj）
{
this.Obj.style.display="block";
this.Resize（）;
}
}
/*
关闭层，采用隐藏层的方法实现
*/
Overlayer.Close=function（）
{
var overlay=this.Obj;
if（overlay）
{
overlay.style.display="none";
}
}

4.结束语
欢迎拍砖，谢谢。