The effect of the magnifying glass JS

HTML code:

Div.box>div#left+div#buttom+div#right

Div#left>img

Div#buttom>div.small>img

CSS code:

. Box{position:relative; }#left{width:310px;Height:310px;Border:1px solid Blueviolet; }#buttom{width:310px;Height:40px;Margin-top:10px; }#buttom. Small{Border:1px solid Wheat;float: Left;Margin-right:5px; }#right{width:400px;Height:310px;; Position:Absolute;Top:0; Left:320px;Border:1px solid #ccc;Display:None;Overflow:Hidden; }#right img{position:Absolute;Top:0; Left:0; }

JS Code:

1<script>2         function$ (ID) {3             returndocument.getElementById (ID);4         }5Window.onload =function () {6             varLeft = $ (' Left ');7             varButton = $ (' buttom ');8             varright = $ (' Right ');9Button.onmouseover =function(e) {Ten                 varE = e| | window.event;//Compatible Events One                 varImgobj = e.srcelement| | E.target;//Get target event source, ie under Srcelement, Firefox under Target A                 if(Imgobj.nodename = = ' IMG ') {//When the target event source is a picture - //alert (IMGOBJ.SRC); -                     varnames = IMGOBJ.SRC;//get the picture path the Console.log (names); -Console.log (Names.lastindexof ('/'));//obtained/the corner mark position -Console.log (names.substring (Names.lastindexof ('/')));//starting from the corner mark to the last picture name -                     varImgoldname = names.substring (Names.lastindexof ('/'))); +                     varImgnewname = Imgoldname.replace (' 1 ', ' 2 ');//change path from renaming - Console.log (imgnewname); +left.innerhtml = '  '; A                 } at             }; -             //The right picture shows the logic -Left.onmouseover =function () { -Right.style.display = ' block '; -                 varleftimg = Left.getelementsbytagname (' img ') [0]; -                 varNames =leftimg.src; in                 varImgoldname = names.substring (Names.lastindexof ('/'))); -                 varImgnewname = Imgoldname.replace (' 2 ', ' 3 '); toright.innerhtml = "; +                 varrightimg = Right.getelementsbytagname (' img ') [0]; -                 //Add a Move event the                  This. onmousemove =function(e) { *                     varE = e| |window.event; $                     varL = e.offsetx| | E.layerx;//compatible notation relative to the location of the event sourcePanax Notoginseng                     varr = e.offsety| |E.layery; -                     //position Large map coordinates according to proportions theRightImg.style.left = l/left.offsetwidth* (right.offsetwidth-rightimg.offsetwidth) + "px"; +RightImg.style.top = r/left.offsetheight* (right.offsetheight-rightimg.offsetheight) + "px"; A                 } the             } +             //Leave event -Left.onmouseout =function () { $Right.style.display = ' None '; $             } -         } -</script>

The effect of the magnifying glass JS