-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path放大镜.html
106 lines (104 loc) · 2.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
fff
ggg
</head>
<style>
*{
margin:0;
padding:0;
}
#wrapper{
position:relative;
margin-right: 10px;
float:left;
}
#little-img{
width:400px;
height:400px;
}
#img{
position:relative;
width:400px;
height:400px;
overflow:hidden;
display:none;
float:left;
}
#zoom{
display:none;
position:absolute;
width:100px;
height:100px;
background-color: #ccc;
opacity:0.5;
filter:alpha(opacity = 50);
}
#big-img{
position:absolute;
}
#mask{
position:absolute;
width:400px;
height:400px;
background-color: #fff;
top:0;
left:0;
opacity:0;
z-index: 1;
filter:alpha(opacity = 0);
cursor:move;
}
</style>
<body>
<div id="wrapper">
<div id="mask"></div>
<img src="img/LittleImage.jpg" alt="" id="little-img">
<div id="zoom"></div>
</div>
<div id="img">
<img src="img/BigImage.jpg" alt="" id="big-img">
</div>
<script>
var oWrapper = document.getElementById("wrapper");
var oZoom = document.getElementById("zoom");
var oImg = document.getElementById("img");
var oBigImg = document.getElementById("big-img");
var oMask = document.getElementById("mask");
oMask.onmouseover = function(){
oZoom.style.display = "block";
oImg.style.display = "block";
}
oMask.onmousemove = function(e){
e = e || event;
var iDisX = oZoom.offsetWidth/2;
var iDisY = oZoom.offsetHeight/2;
oZoom.style.left = e.clientX - iDisX + "px";
oZoom.style.top = e.clientY - iDisY + "px";
if(oZoom.offsetLeft >= oWrapper.offsetWidth - oZoom.offsetWidth){
oZoom.style.left = oWrapper.offsetWidth - oZoom.offsetWidth + "px";
}
if(oZoom.offsetTop >= oWrapper.offsetHeight - oZoom.offsetHeight){
oZoom.style.top = oWrapper.offsetHeight - oZoom.offsetHeight + "px";
}
if(oZoom.offsetLeft <= 0){
oZoom.style.left = 0
}
if(oZoom.offsetTop <= 0){
oZoom.style.top = 0;
}
var iInsX = (e.clientX - oZoom.offsetWidth / 2) / (oWrapper.offsetWidth - oZoom.offsetWidth);
var iInsY = (e.clientY - oZoom.offsetHeight / 2) / (oWrapper.offsetHeight - oZoom.offsetHeight);
oBigImg.style.left = -iInsX*(oBigImg.offsetWidth - oImg.offsetWidth) + "px";
oBigImg.style.top = -iInsY*(oBigImg.offsetHeight - oImg.offsetHeight) + "px";
}
oMask.onmouseout = function(){
oZoom.style.display = "none";
oImg.style.display = "none";
}
</script>
</body>
</html>