用JavaScript中jQuery编写放大镜效果
程序员文章站
2022-06-18 16:25:49
1 2 3 4 5 6 7 8 Document 9 43 44 45 46 47 48 49 --> 50 51 52 53 --> 54 5... ......
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 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 #big {
11 width: 400px;
12 height: 400px;
13 border: 1px solid black;
14 overflow: hidden;
15 display: none;
16 position: absolute;
17 background-color: white;
18 background-image: url('./image/1.bmp');
19 opacity: 0.8;
20 }
21
22 #small {
23 width: 350px;
24 height: 350px;
25 border: 1px solid black;
26 background-image: url('./image/11.bmp');
27 }
28
29 #img {
30 width: 800px;
31 height: 800px;
32 }
33
34 #div {
35 width: 175px;
36 height: 175px;
37 background-color: blue;
38 opacity: 0.5;
39 position: absolute;
40 display: none;
41 }
42 </style>
43 </head>
44
45 <body>
46
47 <div id="small">
48 <div id="div"></div>
49 <!-- <img src="./image/11.bmp" /> -->
50 </div>
51 <div id="img">
52 <div id="big">
53 <!-- <img src="./image/1.bmp" /> -->
54 </div>
55 </div>
56 <script src="./jquery-1.12.4.min.js"></script>
57 <script>
58 //当鼠标在图片上移动时的操作
59 $(window).on('load', function () {
60 $("#small").on('mouseenter', function () {
61 let position = $(this).position();//获取small偏移
62 $("#big").css({//大的图片距离小的图片的距离
63 top: position.top,
64 left: position.left + $(this).width() + 80
65 }).show();
66 })
67
68 $("#small").on('mousemove', function (e) {//鼠标在图片上移动
69 let left1 =e.pageX-$(this).offset().left;
70 let top1=e.pageY-$(this).offset().top;
71 left1=left1-80<0?90:left1;
72 top1=top1-80<0?90:top1;
73 left1=left1-80>175?263:left1;
74 top1=top1-80>175?263:top1;
75 $('#div').css({//小方块显示
76 display: "block",
77 left:left1-80,
78 top:top1 -80
79 })
80
81 let position = $(this).position();
82 //第一种
83 //计算鼠标在图片上面的偏移坐标
84 // let X = e.pageX - position.left;
85 // let Y = e.pageY - position.top;
86 // //定位放大镜的距离
87 // $("#big").scrollTop(Y-100).scrollLeft(X-100);
88
89 // //第二种
90 let x =$("#div").position().left/350*800;
91 let y =$("#div").position().top/350*800;
92 $("#big").css({
93 backgroundPosition:`-${x}px -${y}px`
94 })
95
96
97 });
98 $("#small").on('mouseleave', function () {//鼠标移出时
99 $("#big").css({
100 display: "none"
101 })
102 $('#div').css({//小方块显示
103 display: "none",
104
105 })
106 })
107
108 // console.log($.unique($.merge([1,2],[2,3,4])))
109 })
110 </script>
111 </body>
112
113 </html>
上一篇： wps怎么设置段落间距如何批量调整段间距
下一篇： 制作U盘启动-----计算机经验