JS photo masking implementation code

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: Copy codeThe Code is as follows: function getaskentobject ()
{
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:Copy codeThe Code is as follows :/*
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.