// 放大镜公式
// 已知原展示图片宽为W,高为H
// 放大倍数为N,故放大后宽为N*W,高为N*H
// 放大镜为正方形,宽高为G
// 左边界&&上边界 -N*X+(G/2)=0
// 右边界 -N*X+(G/2)=-(N*W-G)
// 下边界 -N*X+(G/2)=-(N*H-G)
// 480*270 放大到 960*540 2倍
// 左边界和上边界 -2x+100=0 x=50
// 右边界 -2x+100=-(960-200) x=430
// 下边界 -2x+100=-(540-200) x=220
bigImage.onmousemove = function (e) {
var st = document.body.scrollTop || document.documentElement.scrollTop;
var x = e.clientX - glass.offsetLeft;
var y = e.clientY - glass.offsetTop + st;
if (x < 50) {
x = 50;
}
if (x > 430) {
x = 430
}
if (y < 50) {
y = 50
}
if (y > 220) {
y = 220;
}
glassView.children[0].style.left = -x * 2 + 100 + "px";
glassView.children[0].style.top = -y * 2 + 100 + "px";
mark.style.left = x - 50 + "px";
mark.style.top = y - 50 + "px";
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
.glass {
width: 480px;
position: relative;
}
.mark {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.3);
position: absolute;
top: 0;
left: 0;
display: none
}
.bigImage,
.bigImage img {
width: 480px;
height: 270px;
}
.smImage {
width: 480px;
margin-top: 20px;
}
.smImage img {
width: 140px;
margin: 0 8px;
opacity: 0.6;
}
.glassView {
width: 200px;
height: 200px;
position: absolute;
right: -200px;
top: 0;
overflow: hidden;
display: none;
}
.glassView img {
width: 960px;
height: 540px;
position: absolute;
top: 0;
left: 0
}
</style>
</head>
<body>
<div class="glass">
<!-- 放大镜图片 -->
<div class="glassView">
<img src="images/08.jpg" alt="">
</div>
<!-- 大图 -->
<div class="bigImage">
<img src="images/08.jpg" alt="">
<!-- 放大镜标记 -->
<div class="mark"></div>
</div>
<!-- 缩略图 -->
<div class="smImage">
<img src="images/08.jpg" alt="">
<img src="images/09.jpg" alt="">
<img src="images/10.jpg" alt="">
</div>
</div>
</body>
<script>
var glass = document.getElementsByClassName("glass")[0];
var glassView = glass.getElementsByClassName("glassView")[0];
var bigImage = glass.getElementsByClassName("bigImage")[0];
var smImageView = glass.getElementsByClassName("smImage")[0];
var smImage = glass.getElementsByClassName("smImage")[0].children;
var mark = glass.getElementsByClassName("mark")[0];
//记录当前显示图片索引
var x = 0;
smImage[x].style.opacity = "1";
//给每个小图自定义索引编号
for (var i = 0; i < smImage.length; i++) {
smImage[i].index = i;
}
//点击缩略图切换大图(事件委托)
smImageView.onclick = function (e) {
if (e.target.nodeName === "IMG") {
smImage[x].style.opacity = "0.6";
e.target.style.opacity = "1";
x = e.target.index;
bigImage.children[0].src = e.target.src;
glassView.children[0].src = e.target.src;
}
}
//鼠标移动放大局部
bigImage.onmousemove = function (e) {
var st = document.body.scrollTop || document.documentElement.scrollTop;
var x = e.clientX - glass.offsetLeft;
var y = e.clientY - glass.offsetTop + st;
// 放大镜公式
// 已知原展示图片宽为W,高为H
// 放大倍数为N,故放大后宽为N*W,高为N*H
// 放大镜为正方形,宽高为G
// 左边界&&上边界 -N*X+(G/2)=0
// 右边界 -N*X+(G/2)=-(N*W-G)
// 下边界 -N*X+(G/2)=-(N*H-G)
// 480*270 放大到 960*540 2倍
// 左边界和上边界 -2x+100=0 x=50
// 右边界 -2x+100=-(960-200) x=430
// 下边界 -2x+100=-(540-200) x=220
if (x < 50) {
x = 50;
}
if (x > 430) {
x = 430
}
if (y < 50) {
y = 50
}
if (y > 220) {
y = 220;
}
glassView.children[0].style.left = -x * 2 + 100 + "px";
glassView.children[0].style.top = -y * 2 + 100 + "px";
mark.style.left = x - 50 + "px";
mark.style.top = y - 50 + "px";
}
//鼠标移入显示glassView
bigImage.onmouseover = function () {
glassView.style.display = "block";
mark.style.display = "block";
}
//鼠标移出隐藏glassView
bigImage.onmouseout = function () {
glassView.style.display = "none"
mark.style.display = "none"
}
</script>
</html>
网友评论