放大镜

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 <style>
 7     #div1,#div2{
 8         float: left;
 9          310px;
10         height: 310px;
11         position: relative;
12         margin:10px;
13     }
14     #div1 div{
15          100px;
16         height: 100px;
17         position: absolute;
18         left: 0;
19         top: 0;
20         background-color: yellow;
21         opacity:.5;
22         filter:alpha(opacity=50);
23         display: none;
24     }
25     #div1 img{
26          310px;
27         height: 310px;
28     }
29     #div2{
30         overflow: hidden;
31         display: none;
32     }
33     #div2 img{
34          800px;
35         height: 800px;
36         position: absolute;
37         left: 0;
38         top: 0;
39     }
40 </style>
41 <script>
42 window.onload=function(){
43     var oDiv1=document.getElementById('div1');
44     var oMask=oDiv1.children[1];
45     var oDiv2=document.getElementById('div2');
46     var oImg=oDiv2.children[0];
47     oDiv1.onmouseover=function(){
48         oDiv2.style.display='block';
49         oMask.style.display='block';
50     };
51     oDiv1.onmouseout=function(){
52         oDiv2.style.display='none';
53         oMask.style.display='none';
54     };
55     document.onmousemove=function(ev){
56         var ev=ev||event;
57 
58         var t=ev.clientY-oDiv1.offsetTop-oMask.offsetHeight/2;
59         var l=ev.clientX-oDiv1.offsetLeft-oMask.offsetWidth/2;
60         
61         if(t<0){
62             t=0;
63         }else if(t>oDiv1.offsetHeight-oMask.offsetHeight){
64             t=oDiv1.offsetHeight-oMask.offsetHeight
65         }
66         if(l<0){
67             l=0;
68         }else if(l>oDiv1.offsetWidth-oMask.offsetWidth){
69             l=oDiv1.offsetWidth-oMask.offsetWidth
70         }
71 
72         oMask.style.top=t+'px';
73         oMask.style.left=l+'px';
74 
75         var T=-t*(oImg.offsetHeight-oDiv2.offsetHeight)/(oDiv1.offsetHeight-oMask.offsetHeight);
76         var L=-l*(oImg.offsetWidth-oDiv2.offsetWidth)/(oDiv1.offsetWidth-oMask.offsetWidth);
77 
78         oImg.style.top=T+'px';
79         oImg.style.left=L+'px';
80     };
81 };
82 </script>
83 </head>
84 <body>
85     <div id="div1">
86         <img src="img/2.jpg" alt="">
87         <div></div>
88     </div>
89     <div id="div2">
90         <img src="img/2.jpg" alt="">
91     </div>
92 </body>
93 </html>
放大镜主要应用于商城物品的放大，里面设计了offsetTop,clientHeight等物体信息的转换，右边图片的放大就是左边图片的比例放大，移黄色小块，右边等比例移动。