Javascript magnifier v1.0 magnifiers Based on Yui2

V1.0 implementation
1. Magnification settings
2. transparency settings
3. Reverse Effects
4. Customize the size of the enlarged image layer
5. Custom mouse layer size
6 select masking in ie6
7. Custom cursor Style
8. zIndex settings
Simple initialization method example
Copy codeThe Code is as follows:
New flower. init ("Demo", "mag ");
New flower. init ("Demo1", "mag1 ",{
Max: 3, zoomType: false, zoomWidth: 200, zoomHeight: 200, iframe: true, zIndex: 666, cursor: "row-resize"
});

Code Description
Copy codeThe Code is as follows:
DefaultConfig = {
/**
* Multiples of magnifiers
* @ Type Number
*/
Max: 3,
/**
** Transparency of the magnifier mouse movement Layer
* @ Type Number
*/
Opacity: 0.5,
/** The default value is "false" and "true" indicates the reversed color.
* @ Type Boolean
*/
ZoomType: false,
/** Display Animation
* @ Type String
*/
ShowEffect: 'fadin ',
/** Enlarge the Layer Width
* @ Type Number
*/
ZoomWidth: 'auto ',
/** Zoom in Layer Height
* @ Type Number
*/
ZoomHeight: 'auto ',
/** Width of the mouse Layer
* @ Type Number
*/
TipsWidth: 'auto ',
/** Height of the mouse Layer
* @ Type Number
*/
TipsHeight: 'auto ',
/** Iframe overwrites select
* @ Type Boolean
*/
Iframe: false,
/** Iframe zIndex
* @ Type Number
*/
ZIndex: 999,
/** Cursor Style
* @ Type String
*/
Cursor: "auto"
};

Default parameter settings of components, including magnification, width, height, transparency, etc.
2. Define attributes
Copy codeThe Code is as follows:
Namespace. init = function (content, mag, config ){
/**
* Original Image container
* @ Type HTMLElement
*/
This. content = D. get (content );
/**
* Enlarge the image container
* @ Type HTMLElement
*/
This. mag = D. get (mag );
/**
* Original Image
* @ Type HTMLElement
*/
This. imgsource = this. content. getElementsByTagName ("img") [0];
/**
* Enlarge an image
* @ Type HTMLElement
*/
This. img = this. mag. getElementsByTagName ("img") [0];
/**
* Mouse layer
* @ Type HTMLElement
*/
This. tips = this. content. getElementsByTagName ("div") [0];
/**
* Configuration parameters
* @ Type this. tistmct
*/
This. config = L. merge (defaultConfig, config || {});
/* Initialize */
This. _ init ();
};

The init function accepts the container IDs of the three real parameter source images, the enlarged image container IDs, and the configuration parameters. (For the firebug installation, you can check the code structure)
This. config = L. merge (defaultConfig, config || {});
This statement overwrites the attributes of the previous object and returns
Such as this. config = L. merge ({"a": "aa" },{ "a": "bb "});
This. config. a = "bb"
Config | {}
If config does not exist, an empty object independent variable is returned.
Prototype Initialization Method
Code
Copy codeThe Code is as follows:
_ Init: function (){
Var self = this;
/* Assign src to the big image */
This. img. src = this. imgsource. src;
/* Get border length */
This. borderwidth = this. imgsource. offsetWidth-this. imgsource. clientWidth;
/**
* Set the width and height of a large image (X multiples)
* Set the width and position of the large image container.
* Set the width and transparency of the mouse following Layer
*/
This. pi = (this. config. zoomWidth! = 'Auto '? This. config. zoomWidth/this. imgsource. offsetWidth: 1)
This. pi2 = (this. config. zoomHeight! = 'Auto '? This. config. zoomHeight/this. imgsource. offsetHeight: 1)
This. _ css (this. img ,{
'Position': 'absolute ',
'Width': (this. config. zoomWidth! = 'Auto '? This. imgsource. offsetWidth * this. config. max * this. pi: this. imgsource. offsetWidth * this. config. max) + "px ",
'Height': (this. config. zoomHeight! = 'Auto '? This. imgsource. offsetHeight * this. config. max * this. pi2: this. imgsource. offsetHeight * this. config. max) + "px"
}). _ Css (this. mag ,{
'Width': (this. config. zoomWidth! = 'Auto '? This. config. zoomWidth: this. imgsource. offsetWidth) + "px ",
'Height': (this. config. zoomHeight! = 'Auto '? This. config. zoomHeight: this. imgsource. offsetHeight) + "px ",
'Left': D. getX (this. content) + this. imgsource. offsetWidth + 10 + "px ",
'Top': this. content. offsetTop + "px ",
'Position': 'absolute ',
"ZIndex": this. config. zIndex
}). _ Css (this. tips ,{
'Display ':'',
'Width' :( this. config. tipsWidth! = 'Auto '? This. config. tipsWidth: parseInt (this. imgsource. offsetWidth/this. config. max)-this. borderwidth) + "px ",
'Height': (this. config. tipsHeight! = 'Auto '? This. config. tipsHeight: parseInt (this. imgsource. offsetHeight/this. config. max)-this. borderwidth) + 'px ',
'Opacity ': this. config. opacity
})
E. on (this. content, 'mousemove ', function (e ){
Self. _ css (self. mag, {"display": "block "}). _ css (self. tips, {"display": "block "}). _ move (e, self. tips)
})
E. on (this. content, 'mouseout', function (e ){
Self. _ css (self. tips, {"display": "none"}). _ css (self. mag, {"display": "none "});
})
!! This. config. zoomType & E. on (self. tips, 'mouseout', function (e ){
Self. _ css (self. imgsource, {"opacity": 1 });
Self. tips. getElementsByTagName ("img") [0] & self. tips. removeChild (self. tips. getElementsByTagName ("img") [0]);
})
If (ie6 &&!! This. config. iframe ){
This. _ createIframe (this. mag );
}
D. setStyle (this. content, "cursor", this. config. cursor );
},

Original code of component Initialization
By default, the layer and the big image following the mouse are hidden.
1. Assign the image link to the image to be enlarged.
2. If you have a custom zoomWidth or zoomHeight size, set this. pi aspect ratio and this. pi2 aspect ratio (the ratio to the actual image size)
3. Set the width and height of the big image.
4. Set the width and position of the large image container.
5. Set the location, width, and transparency of the mouse layer.
6. Add a mousemove event to the source image container.
7. Add a mouseout event to the source image container
8. After the Reversed Effect, restore the transparency and delete the Dom used to achieve the effect (use appendChild as an img element in the mouse layer structure)
9 ie6: select used to block iframe. (By default, ie6 will be blocked by select when no iframe is available, and cannot be corrected using zIndex)
10 set the cursor Style
Style setting method
Copy codeThe Code is as follows:
_ Css: function (el, json ){
For (var s in json ){
D. setStyle (el, s, json [s]);
}
Return this;
},

Yui provides its own Dom style setting method D. setStyle (dom, style attribute name, attribute value );
Use for (var s in json) to traverse all attributes of a json object
Return this; commonly used method of chained call // this. _ css (/**/)......
Core mousemove Event code
Copy codeThe Code is as follows:
_ Move: function (e, tips ){
Var point = E. getXY (e );
/**
* Prompt layer location
* Position of the big chart
*/
This. _ css (tips ,{
'Top': Math. min (Math. max (point [1]-this. content. offsetTop-parseInt (tips. offsetHeight)/2, 0), this. content. offsetHeight-tips. offsetHeight) + 'px ',
'Left': Math. min (Math. max (point [0]-this. content. offsetLeft-parseInt (tips. offsetWidth)/2, 0), this. content. offsetWidth-tips. offsetWidth) + 'px'
}). _ Css (this. img ,{
'Top':-(parseInt (tips. style. top) * this. config. max * this. pi2) + 'px ',
'Left':-(parseInt (tips. style. left) * this. config. max * this. pi) + 'px'
});
/**
* Reversed colors
*/
If (!! This. config. zoomType ){
If (! Tips. getElementsByTagName ("img"). length ){
Var imgs = document. createElement ("img ");
Imgs. id = 'temp ';
Imgs. src = this. imgsource. src;
This. _ css (imgs ,{
'Width': this. imgsource. offsetWidth + "px ",
'Height': this. imgsource. offsetHeight + "px ",
'Position': 'absolute'
});
Tips. appendChild (imgs );
This. imgs = imgs;
}
This. _ css (this. imgsource ,{
"Opacity": 0.2
}). _ Css (this. tips ,{
"Opacity": 1,
"Visibility": "visible"
}). _ Css (D. get ("temp "),{
'Top':-(parseInt (tips. style. top) + "px ",
'Left':-(parseInt (tips. style. left) + "px"
})
}
},

Tip layer position Move mouse position X axis-this. offsetLeft-width of the mouse box/2
Use Math. max and Math. min to prevent the mouse frame from exceeding tuxiang.
Move the position of the big image = position of the small image X magnification X aspect ratio (1 by default)
The reversed color effect is displayed on a jquery plug-in without looking at his code. His dom structure should be the same as my implementation method.
Set the transparency of the source image to 0.2, and then set the transparency of the mouse layer to 1, that is, the opacity. The layer contains an image and the imgsource address.
The parent element position of this image is absolute, so we need to set the top and left values in real time to locate the image at the mouse layer.
Create iframe
Copy codeThe Code is as follows:
_ CreateIframe: function (el ){
Var layer = document. createElement ('iframe ');
Layer. tabIndex = '-1 ';
Layer. src = 'javascript: false ;';
El. appendChild (layer );
This. _ css (layer ,{
"Width" :( this. config. zoomWidth! = 'Auto '? This. config. zoomWidth: this. imgsource. offsetWidth) + "px ",
"Height" :( this. config. zoomHeight! = 'Auto '? This. config. zoomHeight: this. imgsource. offsetHeight) + "px ",
"ZIndex": this. config. zIndex
})
}

If you set the iframe element width and zIndex, set the parameter to iframe: true and then create it under ie6. If you set it to true in other browsers, it will not be created because it is unnecessary.
Code being improved
1. Add the special effect plug-in mechanism
2. The code for optimizing and setting the wide and high value expressions is too long and bloated.
3. Added image pre-loading.
4. added the callback function interface.
5. Added className To Make It customizable.
6 and so on (...)
Address package download: magnifier