JQuery放大镜 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9         * {
10             margin: 0px;
11             padding: 0px;
12         }
13         
14         #small {
15             width: 322px;
16             height: 480px;
17             position: absolute;
18             left: 100px;
19             top: 100px;
20             border: 1px solid black;
21         }
22         
23         #small img {
24             width: 100%;
25             height: 100%;
26         }
27         
28         #mark {
29             width: 200px;
30             height: 200px;
31             background-color: black;
32             position: absolute;
33             opacity: 0.5;
34             filter: aplha(opacity=50);
35             left: 0px;
36             top: 0px;
37             display: none;
38         }
39         
40         #big {
41             width: 400px;
42             height: 400px;
43             border: 1px solid black;
44             position: absolute;
45             top: 100px;
46             left: 500px;
47             display: none;
48             overflow: hidden;
49         }
50         
51         #big img {
52             width: 644px;
53             height: 960px;
54             position: absolute;
55         }
56     </style>
57     <script src="../../jquery-1.10.1.min.js"></script>
58     <script>
59         $(function() {
60             $('#small').mouseenter(function() {
61                 $('#mark').add('#big').show(20)
62             }).mouseleave(function() {
63                 $('#mark').add('#big').hide(20)
64             }).mousemove(function(ev) {
65                 var left = ev.clientX - $("#small").offset().left - $('#mark').width() / 2,
66                     top = ev.clientY - $("#small").offset().top - $('#mark').height() / 2,
67                     maxLeft = $("#small").outerWidth() - $('#mark').outerWidth(),
68                     maxTop = $("#small").outerHeight() - $('#mark').outerHeight()
69 
70                 if (left < 0) left = 0
71                 if (left > maxLeft) left = maxLeft
72                 if (top < 0) top = 0
73                 if (top > maxTop) top = maxTop
74 
75                 $('#mark').css({
76                     left: left,
77                     top: top
78                 })
79                 $("#big img").css({
80                     left: -2 * left,
81                     top: -2 * top
82                 })
83             })
84         })
85     </script>
86 </head>
87 
88 <body>
89     <div id='small'>
90         <img src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200612091552231-1508736387.jpg" alt="">
91         <div id='mark'></div>
92     </div>
93     <div id='big'>
94         <img src="https://img2020.cnblogs.com/blog/1958222/202006/1958222-20200612091552231-1508736387.jpg" alt="">
95     </div>
96 </body>
97 
98 </html>

 

posted @ 2020-06-12 09:19  strongerPian  阅读(140)  评论(0)    收藏  举报
返回顶端