JS Image Magnifier effect.
Application scenario: Major e-commerce websites.
Annex
<!--author:xiaowencreate a file:2017-01-13 12:28:36last modified:2017-01-13 17:16:46start to work:Finish the Work:Other Information: -<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style> *{margin:0;padding:0; }#box{Height:280px;width:480px;background:URL (small.jpg) no-repeat;float: Left; }#rec{Height:100px;width:100px;Opacity:. 5;background:#ccc;position:Absolute; Left:0;Top:0;Display:None; }#box1{Height:400px;width:400px;background:URL (big.jpg) no-repeat;float: Left;Display:None; } </style></Head><Body><DivID= "box"> <DivID= "Rec"></Div></Div><DivID= "Box1"></Div></Body><Script>Box.onmouseover=function() {Rec.style.display='Block'; Box1.style.display='Block'; } box.onmousemove=function(EV) {vare=EV||event; //var ex=e.clientx;//mouse position not in the middle //EX=E.CLIENTX-REC.OFFSETWIDTH/2;//mouse position in the middle varex=E.clientx-Rec.offsetwidth/2; varey=E.clienty-Rec.offsetheight/2; //let the small square not go beyond the left if(ex<box.offsetleft) {Ex=Box.offsetleft}//let the small square not go beyond the right if(ex>Box.offsetleft+Box.offsetwidth-rec.offsetwidth) { //let the small square not go beyond the leftex=Box.offsetleft+Box.offsetwidth-Rec.offsetwidth}//let the small square not exceed the top if(EY<box.offsettop) {EY=Box.offsettop}//let the small square not exceed the bottom if(EY>Box.offsettop+Box.offsetheight-rec.offsetheight) {EY=Box.offsettop+Box.offsetheight-Rec.offsetheight} rec.style.left=ex+'px'; Rec.style.top=ey+'px'; Box1.style.backgroundPositionX=-4*ex+'px'Box1.style.backgroundPositionY=-4*ey+'px'} box.onmouseout=function() {Rec.style.display='None'; Box1.style.display='None'; }</Script></HTML>
JS Picture Magnifier