遮照层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.结束语

    欢迎拍砖，谢谢。