商城里的放大镜原理其实很简单：
有两张图片，一张大的，一张小的，图案一模一样。
将鼠标放在小图片上的时候，记录下坐标，然后按照两张图片的比例放大，得到对应的大图片的坐标，然后根据坐标对大图片进行移动。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div{width:200px;height:200px;overflow:hidden} 8 #d{position: absolute;} 9 </style> 10 </head> 11 <script> 12 window.onload=function(){ 13 var small=document.getElementById("a") 14 var big=document.getElementById("b") 15 var cc=document.getElementById("c") 16 } 17 function move(){ 18 var cc=document.getElementById("c") 19 var big=document.getElementById("b") 20 var ee=document.getElementById("e") 21 ee.style.display="block" 22 23 xx1=event.clientX+"px" 24 yy1=event.clientY+"px" 25 26 xx=-(event.clientX-1)*4+"px" 27 yy=-(event.clientY-1)*4+"px" 28 ee.style.left=xx1 29 ee.style.top=yy1 30 big.style.left=xx 31 big.style.top=yy 32 cc.innerHTML=xx+" "+yy 33 } 34 35 36 </script> 37 38 <body> 39 <scri 40 <div><img src="img/images/s.jpg" id="a" onmousemove="move()" style=" 200px;height: 200px;"><div id="e" style="display:none; 30px;height: 30px;background: red;opacity: 0.5;position: absolute;"></div></div> 41 <div id="d"><img src="img/images/b.jpeg" id="b" style="position:absolute;800px;height:800px;left: 50px;"></div> 42 <div id="c"></div> 43 </body> 44 </html>