商城里的放大镜原理其实很简单：

有两张图片，一张大的，一张小的，图案一模一样。

将鼠标放在小图片上的时候，记录下坐标，然后按照两张图片的比例放大，得到对应的大图片的坐标，然后根据坐标对大图片进行移动。

 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="width: 200px;height: 200px;"><div id="e" style="display:none;width: 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;width:800px;height:800px;left: 50px;"></div>
42         <div id="c"></div>
43     </body>
44 </html>