本文实例为大家分享了js仿京东放大镜效果的具体代码，供大家参考，具体内容如下
1、效果1：鼠标经过前
2、效果2：鼠标放上去，弹出右边放大镜
3、效果3：鼠标在小盒子移动，放大镜跟着移动
4、源代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<style>
/* 清除默认样式 */
*{
margin: 0;
padding: 0;
}
/* 左边小盒子样式 */
.box1{
position: relative;
width: 450px;
height: 450px;
border: 1px solid #999;
margin-left: 80px;
margin-top: 50px;
}
.box1 .img1{
/* 设置左边图片大小 */
width: 450px;
}
/* 遮罩层bg的样式 */
.box1_bg{
/* 一开始要隐藏起来 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: yellow;
/* 透明效果 */
opacity: .5 ;
cursor: move;
}
/* 右边大盒子样式 */
.big_img{
/* 一开始要隐藏起来 */
display: none;
width: 540px;
height: 540px;
position: absolute;
top: 0;
left: 470px;
border: 1px solid #999;
overflow: hidden;
}
/* 大盒子里面的图片样式 */
.big_img .big_imgs{
position: absolute;
top: 0;
left: 0;
width: 800px;
}
</style>
</head>
<body>
<div class="box1">
<img class="img1" src="images/2-1.jpg" alt="#" >
<div class="box1_bg"></div>
<div class="big_img">
<img class="big_imgs" src="images/2.jpg" alt="#" >
</div>
</div>
<!-- js代码如下 -->
<script>
// ①整个案例可以分为三个功能模块
// ②鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开-->隐藏2个盒子功能
// ③黄色的遮挡层 跟随 鼠标功能。
// ④移动黄色遮挡层,大图片跟随移动功能。
// 事件源：
var box1 = document.queryselector('.box1');
var bg = document.queryselector('.box1_bg');
var big = document.queryselector('.big_img');
// 1. 鼠标 经过 盒子的时候，显示 遮罩层 和 放大镜
box1.addeventlistener('mouseover',function(){
bg.style.display = 'block';
big.style.display = 'block';
})
// 2. 鼠标 离开 盒子的时候，隐藏 遮罩层 和 放大镜
box1.addeventlistener('mouseout',function(){
bg.style.display = 'none';
big.style.display = 'none';
})
// 2.鼠标移动的时候
box1.addeventlistener('mousemove',function(e){
var x = e.pagex - this.offsetleft; // x是鼠标到父盒子x距离
var y = e.pagey - this.offsettop; // y是鼠标到父盒子y距离
// console.log(x ,y)
// 最大移动距离，box1盒子的大小 减去 遮罩层的盒子大小
var max_x = box1.offsetwidth - bg.offsetwidth;
var max_y = box1.offsetheight - bg.offsetheight;
if( max_x >=0 )
// *将坐标减去 遮罩层盒子的一半 鼠标就落到遮罩层的中间
// 移动距离x,y
var x = x - bg.offsetwidth/2;
var y = y - bg.offsetheight/2;
// *当遮罩层超出 box1 的边框的时候，设一个边界卡住它
if(x <= 0 ){
x = 0
}else if( x >= max_x){
x = max_x;
}
if(y <= 0 ){
y=0
}else if( y >= max_y){
y = max_y;
}
// *把鼠标在盒子内的坐标给 遮罩层 实现跟随鼠标移动效果
// 注意加上 px 不然不起效果
bg.style.left = x +'px';
bg.style.top = y +'px';
// 右边图片跟随移动，有一个小算法：big_img_x
// 遮挡层移动距离（x）/遮挡层最大移动距离（max_x）=大图片移动距离（bigx)/大图片移动的最大距离（big_img_x)
// 获取 图片 事件源
var big_img = document.queryselector('.big_imgs');
// big_img_x 求大图片移动的最大距离 正方形 距离一样的
var big_img_x = big_img.offsetwidth - big.offsetwidth ;
var big_img_y = big_img.offsetwidth - big.offsetwidth ;
// bigx 大图片的移动距离
var bigx = x * big_img_x / max_x ;
var bigy = y * big_img_y / max_x ;
big_img.style.left = -bigx +'px';
big_img.style.top = -bigy +'px';
})
</script>
</body>
</html>
|
5、喜欢的话记得点赞 收藏 关注噢~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/mxjwxhn/article/details/107814437