Front-end JS e-commerce Magnifier effect:
<! DOCTYPE html>"en">"UTF-8"> <title> --e-commerce magnifier </title> <style type="Text/css"> *{padding:0; Margin:0; } #left {padding:0; Margin:0; width:400px; height:400px; BORDER:2PX solid blue; Background:url (http://chuantu.biz/t6/17/1503469475x2063891122.jpg) no-repeat; float: Left; Cursor:crosshair; position:relative; Box-sizing:border-box; } #box {width:200px; height:200px; Background:white; Opacity:0.6; Position:absolute; Top:0; Left:0; Display:none; Box-sizing:border-box; } #cover {width:400px; height:400px; background:red; Position:absolute; Left:0; Top:0; Opacity:0; Box-sizing:border-box; } #right {width:400px; height:400px; BORDER:2PX solid black; Overflow:hidden; position:relative; Display:none; Box-sizing:border-box; } #rpic {Position:absolute; } </style> <script type="Text/javascript">window.onload=function () {varleft = document.getElementById (" Left"); varright = document.getElementById (" Right"); varRpic = document.getElementById ("Rpic"); varbox = document.getElementById ("Box"); varCover = document.getElementById ("cover"); //Add mouse Move event to leftCover.onmousemove =function () {//Get Event Object varEV = window.Event; varMouse_left = Ev.offsetx | |Ev.layerx; varMouse_top = Ev.offsety | |Ev.layery; //document.title = mouse_left + ' | ' + mouse_top; //calculate the position of a color block varBox_left = Mouse_left- -; varBox_top = Mouse_top- -; //determine if exceeding if(Box_left <0) {Box_left=0; } if(Box_left > $) {Box_left= $; } if(Box_top <0) {Box_top=0; } if(Box_top > $) {Box_top= $; } //Let the color block moveBox.style.left = Box_left +'px'; Box.style.top= Box_top +'px'; //calculate the right picture position varRpic_left = box_left*-2; varRpic_top = box_top*-2; //let the right moveRpic.style.left = Rpic_left +'px'; Rpic.style.top= Rpic_top +'px'; } //add mouse to the left to move the eventCover.onmouseover =function () {//hide the left and right color blocksBox.style.display ='Block'; Right.style.display='Block'; } //add mouse to left side to move out eventCover.onmouseout =function () {//hide the left and right color blocksBox.style.display ='None'; Right.style.display='None'; } } </script>" Left"> <div id="Box"></div> <div id="cover"></div> </div> <div id=" Right"> "http://chuantu.biz/t6/17/1503469419x2063891122.jpg"Id="Rpic"> </div></body>Front-end JS e-commerce Magnifier effect