JS Example Tutorial: Making picture Amplification effect

Effect:

Run Code Box
<! 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 functions return w3cevent window.event} function getpointerposition (e) {//compatible browsing The mouse x,y of the device obtains the function 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 settings transparent value if (elem.filters) {elem.style.filter = "alpha (opacity=" + level * 100 + ")"; else {elem.style.opacity = level;}} function css (elem,prop) {//CSS set functions to facilitate the setting of CSS values and to set transparent values 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 div Img:null,// Large image mag:null,//Magnification box scale:15//proportional value, set the value of the larger magnification, but there is a problem is that if you do not divide the division, 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 of" height ": (m.cont.clientheight * m.scale) +" PX "//high * Proportional value of original image}" CSS (m.mag,{"display": "None", "width": m.cont.clientwidth + "px",//m.cont for original image, and original image equal width "heigh T ": M.cont.clientheight +" px "," position ":" Absolute "," left ": M.cont.offsetleft + M.cont.offsetwidtH + + "px",//enlarge the position of the box for the original image of the right far 10px "top": M.cont.offsettop + "px"}) var Borderwid = m.cont.getelementsbytagname ("div" ) [0].offsetwidth-m.cont.getelementsbytagname ("div") [0].clientwidth; Gets border's 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-borderwid +" px "////////////= width/Proportional value of original picture-border" 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.C Ont.getelementsbytagname ("img") [0].SRC; The SRC value of the original image is given to enlarge the image m.cont.style.cursor = "crosshair"; M.cont.onmouseover = Magnifier.start; }, Start:function (e) {if (document.all) {//is executed only 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 Normalization 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.OFFSE Tleft-Browse Box width/2,math.max and math.min allow browsing 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) {th Is.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 ("Magnifier"), 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 style= "Position:absolute;top" : 200px;left:650px;width:100px; " > <option>select Test </option> <option> can cover </option> </select> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Previously wrote a jquery image amplification, but there are some small problems, and then recently have time to rewrite it, made a very detailed improvement. Most bugs are improved, and no jquery is used.

Program Description

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

Program 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 magnification layer top and left values, so that 2 places to maintain a consistent reality. and 2 images are proportional to the set, width and height values, so that the effect of amplification, the following detailed explanation:

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:

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",///The Width/scale value of the original picture-border
"Height": M.cont.clientheight/m.scale-borderwid + "px",////high/proportional value of original picture-border width
"Opacity": 0.5//Set Transparency
})

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

CSS (m.mag,{
"Display": "None",
"width": m.cont.clientwidth + "px",//m.cont as the 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 from 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:

CSS (m.img,{
"Position": "Absolute",
"width": (M.cont.clientwidth * m.scale) + "px",///original image width * Proportional value
"Height": (m.cont.clientheight * m.scale) + "px"//high * Proportional value of original image
})

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.