1. First:
2. Usage:
Initialization: overlayer. initialize ({zindex: 100, backgrund: #666, opacity: 80 });
Display: overlayer. Show (); or overlayer. initialize ({zindex: 100, backgrund: #666, opacity: 80}). Show ();
Close: overlayer. Close ();
3. The Code is as follows:
Common functions:
Function getdocumentobject ()
{
VaR OBJ;
If (document. compatmode = 'background ')
{
OBJ = Document. Body;
}
Else
{
Obj1_document.doc umentelement
}
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 ));
}
}
Code of the photo masking layer:
/*
Photo masking Layer
*/
VaR overlayer =
{
// Specifies the ID of the masking layer, which is hard-coded.
ID: '_ dskjoverlayer_by_kevin ',
// Z-axis Sequence
Zindex: 0,
// Background color
Background: '#333 ',
// Transparency
Opacity: 60,
//
OBJ :''
};
/*
Initialization
*/
Overlayer. initialize = function (o)
{
// Create an HTML Element
This. Create ();
// Extended attribute assignment
Extend (this, O );
// Set the 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 elements
*/
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
}
}
/*
Change the window size and reset the width and height.
*/
Overlayer. Resize = function ()
{
If (this. OBJ)
{
VaR size = getpagesize ();
This. obj. style. width = size. Width + 'px ';
This. obj. style. Height = size. height + 'px ';
}
}
/*
Display 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
Thank you.