jq-demo-放大镜

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         
 7         <style>
 8             #smallImg {
 9                 position: absolute;
10                 left: 50px;
11                 top: 100px;
12             }
13             #smallImg, #smallImg img {
14                  200px;
15                 height: 200px;
16             }
17             #smallArea {
18                  display: none; 
19                   50px; height: 50px; background: rgba(200, 222,111, 0.3); 
20                  position: absolute; left: 50px; top: 0;
21             }
22             
23             #bigArea {
24                  display: none; overflow: hidden; 
25                   300px; height: 300px; background: rgba(200,111,222,0.3); 
26                  position: absolute; left: 300px; top: 100px;
27             }
28             #bigImg {
29                  800px; height: 800px;
30                 position: absolute; left: 0; top: 0;
31             }
32             
33         </style>
34         
35         <script type="text/javascript" src="js/jquery-1.12.3.js" ></script>
36         <script>
37             $(function(){
38                 
39                 //等比公式
40                 //小图width/大图width == 小区域width/大区域width
41                 $("#smallArea").width( $("#smallImg").width() * $("#bigArea").width() / $("#bigImg").width() );
42                 $("#smallArea").height( $("#smallImg").height() * $("#bigArea").height() / $("#bigImg").height() );
43                 
44                 //放大系数
45                 var scale = $("#bigImg").width() / $("#smallImg").width();
46                  
47                 //在小图中移动
48                 $("#smallImg").mousemove(function(e){
49                     $("#smallArea").show(); //显示小区域
50                     $("#bigArea").show(); //显示大区域
51                     
52                     
53                     var x = e.pageX - $("#smallImg").offset().left - $("#smallArea").width()/2;
54                     var y = e.pageY - $("#smallImg").offset().top - $("#smallArea").height()/2;
55                     
56                     //控制不超出左右边界
57                     if (x < 0){
58                         x = 0;
59                     }
60                     else if (x > $("#smallImg").width()-$("#smallArea").width()){
61                         x = $("#smallImg").width()-$("#smallArea").width();
62                     }
63                     //控制不超出上下边界
64                     if (y < 0){
65                         y = 0
66                     }
67                     else if (y > $("#smallImg").height()-$("#smallArea").height()) {
68                         y = $("#smallImg").height()-$("#smallArea").height();
69                     }
70                     
71                     //小区域移动
72                     $("#smallArea").css({left:x, top:y});
73                     
74                     //大图移动
75                     $("#bigImg").css({left: -scale*x,top: -scale*y});
76                 })
77                 
78                 //移除小图
79                 $("#smallImg").mouseleave(function(){
80                     $("#smallArea").hide(); //隐藏小区域
81                     $("#bigArea").hide(); //隐藏大区域
82                 })
83             })
84         </script>
85     </head>
86     <body>
87         <div id="smallImg">
88             <img src="images/星际穿越.jpg" />
89             <div id="smallArea"></div>
90         </div>
91         <div id="bigArea">
92             <img id="bigImg" src="images/星际穿越.jpg" />
93         </div>        
94     </body>
95 </html>