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

    欢迎拍砖，谢谢。