我们都知道放大镜效果一般都是用于一些商城中的，列如每当我们打开淘宝，天猫等pc端时，看到心仪的物品时，点击图片时，便呈现出放大镜的效果。在没有去理解分析它的原理时，感觉非常的神奇，当真正地去接触，也是非常好理解、在之前的文章我们也为大家介绍了JavaScript实现放大镜的实例，今天我们带大家介绍下JavaScript仿淘宝实现放大镜效果的实例！
我们将整个布局分三个部分，第一部分为主题的小图片，将他放在整个布局的左上角；第二部分是下边的图片列表，直接跟在小图片的下边；最后一部分是放大镜显示部分，将其定位到小图片的右边。
然后就是利用js添加基本事件（包括鼠标的移入移出等）详细的内用见如下代码
|
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<style>
ul{
list-style: none;
padding: 0;
}
.zoom-box{
width: 452px;
position: relative;
}
.small-box{
position: relative;
border: 1px solid
#ccc;
}
.small-box img{
width: 100%;
height: 100%;
}
.small-box .square{
position: absolute;
left: 0;
top: 0;
background: yellow;
opacity: 0.5;
/*display: none;*/
}
.small-box .mask{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.img-list ul::after{
clear: both;
content:
''
;
display: table;
}
.img-list ul li{
float: left;
margin: 0 10px;
padding: 6px;
}
.img-list img{
border: 2px solid transparent;
}
.img-list img.active{
border: 2px solid red;
}
.big-box{
position: absolute;
top: 0;
left: 100%;
margin-left: 2px;
border: 1px solid
#cccccc;
width: 500px;
height: 500px;
overflow: hidden;
display: none;
}
.big-box img{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<!-- 布局-->
<div><!-- 容器-->
<div><!-- 小图片容器-->
<img src=
"../img/magnifier/m1.jpg"
alt=
""
/>
<div></div><!-- 鼠标选中框-->
<div></div><!-- 鼠标悬浮位置-->
</div>
<div><!-- 图片列表-->
<ul>
<li><img src=
"../img/magnifier/s1.jpg"
alt=
""
data-small=
"../img/magnifier/m1.jpg"
data-big=
"../img/magnifier/b1.jpg"
/></li>
<li><img src=
"../img/magnifier/s2.jpg"
alt=
""
data-small=
"../img/magnifier/m2.jpg"
data-big=
"../img/magnifier/b2.jpg"
/></li>
<li><img src=
"../img/magnifier/s3.jpg"
alt=
""
data-small=
"../img/magnifier/m3.jpg"
data-big=
"../img/magnifier/b3.jpg"
/></li>
<li><img src=
"../img/magnifier/s4.jpg"
alt=
""
data-small=
"../img/magnifier/m4.jpg"
data-big=
"../img/magnifier/b4.jpg"
/></li>
<li><img src=
"../img/magnifier/s5.jpg"
alt=
""
data-small=
"../img/magnifier/m5.jpg"
data-big=
"../img/magnifier/b5.jpg"
/></li>
</ul>
</div>
<div><!-- 放大镜-->
<img src=
"../img/magnifier/b1.jpg"
alt=
""
/>
</div>
</div>
<script>
//获取要操作的元素
var
smallbox = $(
'.small-box .mask'
);
var
smallimg = $(
'.small-box img'
);
var
square = $(
'.square'
);
var
bigbox = $(
'.big-box'
);
var
bigimg = $(
'.big-box img'
);
var
imgs = $all(
'.img-list img'
);
//鼠标经过图片列表显示被选中，实现图片切换
for
(
var
i = 0; i < imgs.length; i++){
imgs[i].onmouseover =
function
(){
for
(
var
j = 0; j < imgs.length; j++){
imgs[j].className =
''
;
}
this
.className =
'active'
;
//改变对应的图片链接
smallimg.src =
this
.getAttribute(
'data-small'
);
bigimg.src =
this
.getAttribute(
'data-big'
);
};
}
//鼠标移入放大器显示并设置选中框的大小
smallbox.onmouseover =
function
(){
square.style.display =
'block'
;
bigbox.style.display =
'block'
;
//位置w/smallimg.w = bigbox.w/bigimg.w
square.style.width = bigbox.offsetWidth * smallimg.offsetWidth/bigimg.offsetWidth +
'px'
;
square.style.height = bigbox.offsetHeight * smallimg.offsetHeight/bigimg.offsetHeight +
'px'
;
};
//鼠标移出放大器隐藏
smallbox.onmouseout =
function
(){
square.style.display =
'none'
;
bigbox.style.display =
'none'
;
};
//放大器移动
//获取鼠标的位置
smallbox.onmousemove =
function
(ev){
var
oEvent = ev || event;
var
x = oEvent.offsetX - square.offsetWidth/2;
var
y = oEvent.offsetY - square.offsetHeight/2;
if
(x < 0){
x = 0;
}
if
(x > smallbox.offsetWidth - square.offsetWidth){
x = smallbox.offsetWidth - square.offsetWidth;
}
if
(y < 0){
y = 0;
}
if
(y > smallbox.offsetHeight - square.offsetHeight){
y = smallbox.offsetHeight - square.offsetHeight;
}
//给选中框定位
square.style.left = x +
'px'
;
square.style.top = y +
'px'
;
//给放大器定位 x/? = smallimg.w/bigimg.w
bigimg.style.top = -y * bigimg.offsetWidth/smallimg.offsetWidth +
'px'
;
bigimg.style.left = -x * bigimg.offsetHeight/smallimg.offsetHeight +
'px'
;
};
//通过名称查找某个元素
function
$(name){
return
document.querySelector(name);
}
//通过名称查找相同的一组数据
function
$all(name){
return
document.querySelectorAll(name);
}
</script>
</body>
</html>
|
总结：