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>
