JS shading layer implementation code_javascript skills

1. First, the rendering:

2. How to use:
Initialization: Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80} );
Show: Overlayer.Show(); or Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}).Show();
Close: Overlayer.Close();
3. The code is as follows:
Public function:

Copy code The code is as follows:

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));
}
}

Occlusion layer code:

Copy code The code is as follows:

/*
Overlay layer
*/
var Overlayer=
{
//Overlay layer ID, this is hard-coded
ID:'__DSKJOVERLAYER_BY_KEVIN',
//Z-axis order
ZIndex:0,
//Background color
Background:'#333',
//Transparency
Opacity:60,
//
Obj:''
};
/*
Initialization
*/
Overlayer.Initialize=function(o)
{
//Create Html element
this .Create();
//Extended attribute assignment
Extend(this,o);
//Set style
this.SetStyleCss();
//Additional event
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;
}
/*
Create HTML element
*/
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;
}
/*
Set Style
*/
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 adversity
opacity = this.Opacity/100;//Non-IE
}
}
/*
Window change Resize width and height when resizing
*/
Overlayer.Resize=function()
{
if(this.Obj)
{
var size=GetPageSize();
this.Obj.style.width=size.width 'px';
this.Obj.style.height=size.height 'px';
}
}
/*
Show layer
*/
Overlayer.Show=function()
{
//alert('show' Overlayer.ID);
if(this.Obj)
{
this.Obj.style.display='block';
this.Resize();
}
}
/*
Close the layer and use the hidden layer method
*/
Overlayer.Close=function()
{
var overlay=this.Obj;
if(overlay)
{
overlay.style.display='none ';
}
}

4. Conclusion
Welcome to make bricks, thank you.