JavaScript image Amplification Effect and code description _ image Effects

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>Magnifier</title> <style type=" Text/css "> #magnifier {width:342px; height:420px; Position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000; } #img {width:342px; height:420px; } #Browser {border:1px solid #000; z-index:100; Position:absolute; Background: #555; } #mag {border:1px solid #000; Overflow:hidden; z-index:100; } </style> <script type= "Text/javascript" > Function Geteventobject (w3cevent) {//event normalized function R Eturn W3cevent | | window.event; function Getpointerposition (e) {//browser-compatible mouse x,y get functions e = e | | geteventobject (e); var x = E.pagex || (E.clientx + (Document.documentElement.scrollLeft | | document.body.scrollLeft)); var y = E.pagey | | (E.clienty + (Document.documentElement.scrollTop | | document.body.scrollTop)); return {' X ': x, ' y ': y}; The function setopacity (elem,level) {//compatible browser setting transparency value if (elem.filters) {elem.style.filter = ' alpha ( Opacity= ' + level * 100 + ') '; else {elem.style.opacity = level; } function css (elem,prop) {//CSS set function to facilitate the setting of CSS values, and to set the transparency value for (var i in prop) {if (i = = ' opacity ') {setopacity (elem,prop[i]); else {Elem.style[i] = Prop[i]; } return elem; var magnifier = {m:null, init:function (Magni) {var m = this.m = Magni | | {cont:null,//Mount the original image of the Div img:null,//enlarge the image mag:null, Enlarge box scale:15//proportional value, the larger the value, the larger the magnification, but here's a questionis if not divisible, will produce some very small white edge, currently do not know how to resolve the CSS (m.img,{' position ': ' absolute ', ' Width ': (m.cont.clientwidth * m.scale) + ' px ',///original image of the wide * proportional value ' height ': (m.cont.clie Ntheight * m.scale) + ' px '//high * Proportional value of original image}) CSS (m.mag,{' Displa Y ': ' None ', ' width ': m.cont.clientwidth + ' px ',//m.cont for original image, with original image equal width ' height ': M. Cont.clientheight + ' px ', ' position ': ' absolute ', ' left ': M.cont.offsetleft + m.cont.offsetwid th + + ' px ',//Zoom box position is far to the right of the original image 10px ' top ': M.cont.offsettop + ' px '} var borderwid = m.cont.getelementsbytagname (' div ') [0].offsetwidth-m.cont.getelementsbytagname (' div ') [0]. clientwidth; Get border wide css (m.cont.getelementsbytagname (' div ') [0],{//m.cont.getelementsbytagname (' div ') ) [0] for the Browse box ' Display ': ' None ',//start set to invisible ' width ': m.cont.clientwidth/m.scale-b Orderwid + ' px ',/////proportional value of original picture-border width ' height ': M.cont.clientheight/m.scale-borderwid + ' PX ',//high/proportional value of original picture-border width ' opacity ': 0.5//Set Transparency}) M.IMG.SRC = M.cont.getelementsbytagname (' img ') [0].SRC; Let the src value of the original image give the magnified image m.cont.style.cursor = ' crosshair '; M.cont.onmouseover = Magnifier.start; }, Start:function (e) {if (document.all) {//only executes under IE, primarily to avoid IE6 select cannot overwrite Magnifier.createiframe (MAGNIFIER.M.IMG); } this.onmousemove = Magnifier.move; This points to m.cont this.onmouseout = magnifier.end; }, Move:function (e) {var pos = getpointerposition (e); Event Standardization THIS.GETELEMENTSBYtagname (' div ') [0].style.display = '; CSS (this.getelementsbytagname (' div ') [0],{' top ': Math.min Math.max (pos.y-this.offsettop-parseint Telementsbytagname (' div ') [0].style.height]/2,0), This.clientheight-this.getelementsbytagname (' div ') [0]. offsetheight) + ' px ', ' Left ': Math.min (Math.max pos.x-this.offsetleft-parseint (this.getelementsbytagname (' div ') [0].style.width)/2,0), This.clientwidth-this.getelementsbytagname (' div ') [0].offsetwidth] + ' px '//left= mouse x- This.offsetleft-Browse Box width/2,math.max and math.min allow navigation box to not exceed image}) Magnifier.m.mag.style.display = ' '; CSS (magnifier.m.img,{' top ':-(parseint (This.getelementsbytagname (' div ') [0].style.top) * Magnifier.m.scale) + ' px ', ' Left ':-(parseint (This.getelementsbytagname (' div ') [0].style.left) * Magnifier.m.scale) + ' px ' })}, End:function (e) {this.geTelementsbytagname (' div ') [0].style.display = ' none '; Magnifier.removeiframe (MAGNIFIER.M.IMG); Destroy the iframe Magnifier.m.mag.style.display = ' none '; }, Createiframe:function (elem) {var layer = document.createelement (' iframe '); Layer.tabindex = '-1 '; LAYER.SRC = ' javascript:false; '; Elem.parentNode.appendChild (layer); Layer.style.width = elem.offsetwidth + ' px '; Layer.style.height = elem.offsetheight + ' px '; }, Removeiframe:function (elem) {var layers = elem.parentNode.getElementsByTagName (' iframe '); while (Layers.length >0) {layers[0].parentnode.removechild (layers[0]); }} window.onload = function () {magnifier.init {cont:document.getElementById (' Magnifie R '), Img:document.getElementById (' magnifierimg '), Mag:document.getElementById (' Mag '), Scale:3}); } </script> </pead> <body> <div id= "Magnifier" > <div id= "Browser" ></div> < /div> <div id= "mag" ></div> <select > <option>select Test </option> <option> can cover & lt;/option> </select> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

[Procedural notes]
Mainly for the Magnifier class, the main methods are:
Init: How to Run
Start: The event handling that the mouse moves into the div
Move: The event handling that the mouse moves in the DIV
End: Event handling after mouse move out

[Procedure Introduction]
Main thinking: When the mouse moved into the picture, the magnification layer of the div appears, and then according to the mouse movement, change the image in the enlarged layer of the top and left values. The reality of keeping 2 places consistent. and 2 images are proportional to set, width and height values, To produce a magnified effect. The following is explained in detail:

In the Init method, the main processing of the navigation box div layer size, enlarge the size of the box and enlarged image size.
Browse box div width and height according to the original picture size/scale value can be obtained, see Code:

Copy Code code as follows:

CSS (m.cont.getelementsbytagname (' div ') [0],{//m.cont.getelementsbytagname (' div ') [0] for Browse box
' Display ': ' None ',//start set to invisible
' Width ': m.cont.clientwidth/m.scale-borderwid + ' px ',////width/scale of the original picture-border
' Height ': m.cont.clientheight/m.scale-borderwid + ' px ',////high/proportional value of original picture-width of border
' Opacity ': 0.5//Set Transparency
})

The magnification box is set to the same size as the original image, with the following code:

Copy Code code as follows:

CSS (m.mag,{
' Display ': ' None ',
' Width ': m.cont.clientwidth + ' px ',//m.cont for original image
' Height ': m.cont.clientheight + ' px ',
' Position ': ' absolute ',
' Left ': M.cont.offsetleft + m.cont.offsetwidth + + ' px ',//the position of the magnification box is far to the right of the original image 10px
' Top ': M.cont.offsettop + ' px '
})

Enlarge the image size, the original image size * Proportional value, the code is as follows:

Copy Code code as follows:

CSS (m.img,{
' Position ': ' absolute ',
' Width ': (m.cont.clientwidth * m.scale) + ' px ',///original image wide * Proportional value
' Height ': (m.cont.clientheight * m.scale) + ' px '//original image high * proportional value
})

Because magnification is magnified by scale, careful calculation is required on the browsing box and magnified image, which is one of the main thoughts of the program.

In the first written program, the onmouseover is omitted directly, because the use of onmousemove can satisfy the function. And this time the use of onmouseover is to avoid the use of the process to encounter a select, under IE6, Select Cannot set the Z-index value so that the Zoom box suddenly appears but cannot overwrite the select. The following is discussed in detail.

In the Move method, the most important thing is that if you do the mouse movement, the navigation box as the mouse moves, the enlarged image also follows the motion, making the enlarged image displayed in the same range as the Browse box in the original image location.
First of all say the navigation box following the mouse movement, the main code is as follows:

Copy Code code as follows:

Top:pos.y-this.offsettop-parseint (This.getelementsbytagname (' div ') [0].style.height)/2
Left:pos.x-this.offsetleft-parseint (This.getelementsbytagname (' div ') [0].style.width)/2

Because yes, bind the event to the M.cont, so this time this point points to M.cont.

The image can be learned left= mouse x-this.offsetleft-navigation box width/2, so with the geometry can be drawn from the code, and the value of the top is based on the same reason, here is not to do detailed explanation.
The next step is to change the top and left values of the image as you move the mouse, and the code is as follows:

Copy Code code as follows:

CSS (magnifier.m.img,{
' Top ':-(parseint (This.getelementsbytagname (' div ') [0].style.top) * Magnifier.m.scale) + ' px ',
' Left ':-(parseint (This.getelementsbytagname (' div ') [0].style.left) * Magnifier.m.scale) + ' px '
})

The code is clear, and you just need to scale the top and left values of the navigation box. The reason for the minus sign is that the default coordinates are (0,0), and in the course of the move, the initial coordinates move only in the negative direction.
There are 2 places to note in this approach:
1.

Copy Code code as follows:

This.getelementsbytagname (' div ') [0].style.display = ';

Should be placed before the top and left of the this.getelementsbytagname (' div ') [0], because if display is none, it cannot get its width and height. If you put display = ' after setting top and left, There will be a strange phenomenon, we can try, the problem has been bothering me for a long time, in many attempts to find the problem again this, the phenomenon is as follows:

2.

Copy Code code as follows:

' Top ': Math.min (Math.max (pos.y-this.offsettop-parseint this.getelementsbytagname (' div ') [0].style.height)/2,0), This.clientheight-this.getelementsbytagname (' div ') [0].offsetheight] + ' px ';

Such a long code can be confusing, I just use Math.max () and math.min () to avoid the use of the IF statement, I stole a bit lazy, is to achieve the browser box will not exceed the original image, a closer look at the clear. ^^
The End method is clear: the Navigation box and the Zoom box are hidden.
[Overwrite Select]
In order to cover select under IE6, I added 2 createiframe and Removeiframe. An IFRAME was created in the onmouseover incident and an IFrame was destroyed in the onmouseout.

Copy Code code as follows:

Createiframe:function (elem) {
var layer = document.createelement (' iframe ');
Layer.tabindex = '-1 ';
LAYER.SRC = ' javascript:false; ';
Elem.parentNode.appendChild (layer);
Layer.style.width = elem.offsetwidth + ' px ';
Layer.style.height = elem.offsetheight + ' px ';
}

First, you need to use a negative TabIndex value to exclude the IFRAME from the tab sequence, otherwise the user may use the keyboard to navigate to it, which is out of order, so you need to set the TabIndex value to negative. Also, set SRC, This value is set to avoid problems with SSL pages. In IE, an IFRAME without SRC will automatically load the About:blank. IE treats this as an unsafe page and produces a warning dialog box that reads "This page contains safe and unsafe content." To avoid this problem, SRC can be set to "JAVASCRIPT:FALSE;" (This section is excerpted from the <<javascript Essence >>)
And to avoid the chaos caused by the IFRAME in the page, so in onmouseout will be the IFRAME destroyed, but not to hide it.
[Use instructions]
Due to the problem of time, so there is no encapsulation of too good, mainly in CSS, it is best to set according to my settings, feel a bit messy. I hope you can understand, and the modification is not too difficult. Because I have a CSS () function, as long as a little set on it. Use Example:

Copy Code code as follows:

Magnifier.init ({
Cont:document.getElementById (' Magnifier '),
Img:document.getElementById (' magnifierimg '),
Mag:document.getElementById (' Mag '),
Scale:3
});

Cont is the container abbreviation, refers to the div that loads the original image
IMG is a magnified image.
MAG is the magnifier abbreviation, refers to the enlarged box
Scale is proportional, the larger the value of the setting, but the problem here is that if you do not divide it, there will be little white edges, and now you don't know how to solve it.
As for the Browse box and the original image for M.cont.getelementsbytagname (' img ') [0] and M.cont.getelementsbytagname (' div ') [0], Therefore, it is recommended that the div loading the image is best placed only a div and IMG.
[Program Code]

Copy Code code as follows:

function Geteventobject (w3cevent) {//Event normalization functions
return W3cevent | | window.event;
}


function Getpointerposition (e) {//browser-compatible mouse x,y get functions
E = e | | Geteventobject (e);
var x = E.pagex | | (E.clientx + (Document.documentElement.scrollLeft | | document.body.scrollLeft));
var y = E.pagey | | (E.clienty + (Document.documentElement.scrollTop | | document.body.scrollTop));

return {' X ': x, ' y ': y};
}

function SetOpacity (elem,level) {//compatible browser set transparency value
if (elem.filters) {
Elem.style.filter = ' alpha (opacity= ' + level * 100 + ') ';
} else {
Elem.style.opacity = level;
}
}

function css (elem,prop) {//css set functions to easily set CSS values, and to set transparent values compatible
for (var i in prop) {
if (i = = ' opacity ') {
SetOpacity (Elem,prop[i]);
} else {
Elem.style[i] = Prop[i];
}
}
return elem;
}

var Magnifier = {
M:null,

Init:function (Magni) {
var m = this.m = Magni | | {
Cont:null,//div with original image loaded
Img:null,//enlarged image
Mag:null,//Zoom box
SCALE:15//proportional value, the larger the value of the setting, the larger the magnification, but here is the problem is that if you do not divide the division, it will produce some very small white edges, now do not know how to solve
}

CSS (m.img,{
' Position ': ' absolute ',
' Width ': (m.cont.clientwidth * m.scale) + ' px ',///original image wide * Proportional value
' Height ': (m.cont.clientheight * m.scale) + ' px '//original image high * proportional value
})

CSS (m.mag,{
' Display ': ' None ',
' Width ': m.cont.clientwidth + ' px ',//m.cont for original image, width with original image
' Height ': m.cont.clientheight + ' px ',
' Position ': ' absolute ',
' Left ': M.cont.offsetleft + m.cont.offsetwidth + + ' px ',//the position of the magnification box is far to the right of the original image 10px
' Top ': M.cont.offsettop + ' px '
})

var borderwid = m.cont.getelementsbytagname (' div ') [0].offsetwidth-m.cont.getelementsbytagname (' div ') [0]. clientwidth; Get the width of the border

CSS (m.cont.getelementsbytagname (' div ') [0],{//m.cont.getelementsbytagname (' div ') [0] for Browse box
' Display ': ' None ',//start set to invisible
' Width ': m.cont.clientwidth/m.scale-borderwid + ' px ',////width/scale of the original picture-border
' Height ': m.cont.clientheight/m.scale-borderwid + ' px ',//high/proportional value of original picture-width of border
' Opacity ': 0.5//Set Transparency
})

M.IMG.SRC = M.cont.getelementsbytagname (' img ') [0].SRC; Give the SRC value of the original image a magnified image
M.cont.style.cursor = ' crosshair ';

M.cont.onmouseover = Magnifier.start;

},

Start:function (e) {

if (document.all) {//only executes under IE, primarily to avoid IE6 select cannot overwrite
Magnifier.createiframe (MAGNIFIER.M.IMG);
}

This.onmousemove = Magnifier.move; This points to M.cont
This.onmouseout = Magnifier.end;
},

Move:function (e) {
var pos = getpointerposition (e); Event standardization

This.getelementsbytagname (' div ') [0].style.display = ';

CSS (this.getelementsbytagname (' div ') [0],{
' Top ': Math.min (Math.max (pos.y-this.offsettop-parseint this.getelementsbytagname (' div ') [0].style.height)/2,0), This.clientheight-this.getelementsbytagname (' div ') [0].offsetheight] + ' px ',
' Left ': Math.min (Math.max (pos.x-this.offsetleft-parseint this.getelementsbytagname (' div ') [0].style.width)/2,0), This.clientwidth-this.getelementsbytagname (' div ') [0].offsetwidth] + ' px '//left= mouse x-this.offsetleft-Browse box width/2, Math.max and math.min Let the navigation box not exceed the image
})

Magnifier.m.mag.style.display = ';

CSS (magnifier.m.img,{
' Top ':-(parseint (This.getelementsbytagname (' div ') [0].style.top) * Magnifier.m.scale) + ' px ',
' Left ':-(parseint (This.getelementsbytagname (' div ') [0].style.left) * Magnifier.m.scale) + ' px '
})

},

End:function (e) {
This.getelementsbytagname (' div ') [0].style.display = ' none ';
Magnifier.removeiframe (MAGNIFIER.M.IMG); Destroy the IFRAME.

Magnifier.m.mag.style.display = ' None ';
},

Createiframe:function (elem) {
var layer = document.createelement (' iframe ');
Layer.tabindex = '-1 ';
LAYER.SRC = ' javascript:false; ';
Elem.parentNode.appendChild (layer);

Layer.style.width = elem.offsetwidth + ' px ';
Layer.style.height = elem.offsetheight + ' px ';
},

Removeiframe:function (elem) {
var layers = elem.parentNode.getElementsByTagName (' iframe ');
while (Layers.length >0) {
Layers[0].parentnode.removechild (Layers[0]);
}
}
}

File package Download