JS 遮照层实现代码_javascript技巧

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.结束语
欢迎拍砖，谢谢。