Tip: You can modify some of the code before running
<! 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 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 settings transparent value if (elem.filters) {elem.style.filter = ' alpha (opacity= ' + level * 10 0 + ') '; 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,//Zoom box SCALE:15//proportional value, set the value of the larger the bigger the magnification, but here is a problem is 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's 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 + Ten + ' px ',///Zoom box position is far to the right of the original image 10px ' top ': M.cont.offsettop + ' px '}) var borderwid = M.cont.getelementsbytagnam E (' div ') [0].offsetwidth-m.cont.getelementsbytagname (' div ') [0].clientwidth; Get Border's wide 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 ',//////////ratio of original picture-border width ' He Ight ': 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 ( 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) {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 (' Magnifier '), IMG:DOCU Ment.getelementbyid (' magnifierimg '), Mag:document.getElementById (' Mag '), scale:3}); } </script> </pead> <body> <div id= "Magnifier" > <div id= "Browser" ></div> </div& Gt <div Id= "mag" ></div> <select > <option>select Test </option> <option> can cover </option> </select> </body> </ptml>
Tip: You can modify some of the code before running
