-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path网页放大镜效果.html
143 lines (138 loc) · 4.49 KB
/
网页放大镜效果.html
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
140
141
142
143
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small {
position: relative;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small"><!--小层-->
<img src="images/small.png" width="350" alt=""/>
<div class="mask"></div><!--遮挡层-->
</div>
<div class="big"><!--大层-->
<img src="images/big.jpg" width="800" alt=""/><!--大图-->
</div>
</div>
<script>
// var box=document.getElementById("box");
// var small=box.children[0];
// var mask=small.children[1];
// var big=box.children[1];
// var bigImg=big.children[0];
// /**
// * 1 鼠标移入small，让mask出现，鼠标移除small，mask消失
// * 2 鼠标在small上移动的时候，mask跟住移动
// * 3 鼠标在small上移动的时候，大图在big里面移动 *
// */
//// 鼠标移入small，让mask出现，鼠标移除small，mask消失
// small.onmouseover=function(){
// mask.style.display="block";
// big.style.display="block";
// }
// small.onmouseout=function(){
// mask.style.display="none";
// big.style.display="none";
// }
//// 2 鼠标在small上移动的时候，mask跟住移动
// small.onmousemove=function(e){
// var mouseX= e.pageX;
// var mouseY= e.pageY;
// //mask位置的计算，mask位置=鼠标位置-box当前的距离-mask宽高的一半
// var x=mouseX-box.offsetLeft-mask.offsetWidth/2;
// var y=mouseY-box.offsetTop-mask.offsetHeight/2;
// //限制mask移出box。
// //最少范围
// x=x<0?0:x;
// y=y<0?0:y;
//// 最大范围
// var maxX=small.offsetWidth-mask.offsetWidth;
// var maxY=small.offsetHeight-mask.offsetHeight;
// x=x>maxX?maxX:x;
// y=y>maxY?maxY:y;
// mask.style.left=x+"px";
// mask.style.top=y+"px";
// // 鼠标在small上移动的时候，大图在big里面移动
// //大图的当前位置 = 大图的最大距离 * mask的当前位置 / mask的最大距离
// //mask的当前位置 就是x和y
// //mask的最大距离 就是maxX和maxY
//// 大图的最大距离 = 大图的宽高 - big的宽高
// var bigImgMaxX=bigImg.offsetWidth-big.offsetWidth;
// var bigImgMaxY=bigImg.offsetHeight-big.offsetHeight;
// //大图当前位置
// var bigImgX=bigImgMaxX*x/maxX;
// var bigImgY=bigImgMaxY*y/maxY;
// bigImg.style.marginLeft=-bigImgX+"px";
// bigImg.style.marginTop=-bigImgY+"px";
// }
var box=document.getElementById("box");
var small=box.children[0];
var mask=small.children[1];
var big=box.children[1];
var bigImg=big.children[0];
small.onmouseover=function(){
mask.style.display="block";
big.style.display="block";
}
small.onmouseout=function(){
mask.style.display="none";
big.style.display="none";
}
small.onmousemove=function(e){
var x= e.pageX-box.offsetLeft-mask.offsetWidth/2;
var y= e.pageY-box.offsetTop-mask.offsetHeight/2;
x=x<0?0:x;
y=y<0?0:y;
var maxX=small.offsetWidth-mask.offsetWidth;
var maxY=small.offsetHeight-mask.offsetHeight;
x=x>maxX?maxX:x;
y=y>maxY?maxY:y;
mask.style.left=x+"px";
mask.style.top=y+"px";
var bigImgMaxX=bigImg.offsetWidth-big.offsetWidth;
var bigImgMaxY=bigImg.offsetHeight-big.offsetHeight;
var bigImgX=bigImgMaxX*x/maxX;
var bigImgY=bigImgMaxY*y/maxY;
console.log(bigImgX)
bigImg.style.marginLeft=-bigImgX+"px";
bigImg.style.marginTop=-bigImgY+"px";
}
</script>
</body>
</html>