JavaScript 放大镜
Posted 乱舞春秋__
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 放大镜相关的知识，希望对你有一定的参考价值。
主要功能：
1.小方块对应的区域放大至右侧
2.鼠标悬停在小图上时，中图和大图会自动切换
3.点击左右箭头可实现小图左右滑动
4.鼠标在中图上移动时，大图跟随一起移动
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大鏡</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
position: relative;
width: 352px;
height: 426px;
margin: 50px auto auto 80px;
}
.top {
position: relative;
width: 350px;
height: 350px;
border: 1px solid #eee;
margin-bottom: 20px;
cursor: move;
}
.top>img {
width: 100%;
height: 100%;
}
.top::after {
position: absolute;
bottom: 0;
right: 0;
content: '';
width: 30px;
height: 30px;
background-image: url(img/__sprite.png);
background-position: 0 -24px;
}
.bottom {
position: relative;
width: 352px;
height: 54px;
}
.l-arrow {
position: absolute;
top: 50%;
left: 0;
content: '';
width: 22px;
height: 32px;
margin-top: -16px;
background-image: url(img/l.png);
cursor: pointer;
}
.r-arrow {
position: absolute;
top: 50%;
right: 0;
content: '';
width: 22px;
height: 32px;
margin-top: -16px;
background-image: url(img/r.png);
cursor: pointer;
}
.container {
position: relative;
width: 290px;
height: 54px;
margin: 0 auto;
overflow: hidden;
}
.little {
width: 522px;
height: 54px;
transition: all .5s linear;
}
.little>li {
float: left;
box-sizing: border-box;
margin: 0 2px;
width: 54px;
height: 54px;
border: 2px solid #fff;
}
.little>li>img {
width: 100%;
height: 100%;
}
.square {
position: absolute;
/* z-index: 2; */
background-color: rgba(228, 98, 23, 0.438);
}
.big_img {
position: absolute;
top: 0;
left: 350px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-repeat: no-repeat;
}
.container>ul {
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<div class="big_img" style="background-image: url(img/b1.jpg);background-position: 0 0; display: none;"></div>
<div class="top">
<div class="square" style="display: none; top: 0;
left: 0; width: 219px;
height: 219px;"></div>
<img src="img/m1.jpg" id="middle">
</div>
<div class="bottom">
<span class="l-arrow"></span>
<span class="r-arrow"></span>
<div class="container">
<ul class="little" style="top: 0;left: 0;">
<li class="little_img" data_src='m1.jpg' data_b_src='b1.jpg'><img src="img/l1.jpg" alt=""></li>
<li class="little_img" data_src='m2.jpg' data_b_src='b2.jpg'><img src="img/l2.jpg" alt=""></li>
<li class="little_img" data_src='m3.jpg' data_b_src='b3.jpg'><img src="img/l3.jpg" alt=""></li>
<li class="little_img" data_src='m4.jpg' data_b_src='b4.jpg'><img src="img/l4.jpg" alt=""></li>
<li class="little_img" data_src='m5.jpg' data_b_src='b5.jpg'><img src="img/l5.jpg" alt=""></li>
<li class="little_img" data_src='m6.jpg' data_b_src='b6.jpg'><img src="img/l6.jpg" alt=""></li>
<li class="little_img" data_src='m7.jpg' data_b_src='b7.jpg'><img src="img/l7.jpg" alt=""></li>
<li class="little_img" data_src='m8.jpg' data_b_src='b8.jpg'><img src="img/l8.jpg" alt=""></li>
<li class="little_img" data_src='m9.jpg' data_b_src='b9.jpg'><img src="img/l9.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<script>
var imgList = document.getElementsByClassName('little_img');
var pre = null;
var middle_img = document.getElementById('middle');
var big = document.getElementsByClassName('big_img')[0];
imgList[0].style.borderColor = 'red';
pre = imgList[0];
for (var i = 0; i < imgList.length; i++) {
imgList[i].onmouseenter = function () {
pre.style.borderColor = 'white';
this.style.borderColor = 'red';
pre = this;
var middle_src = this.getAttribute('data_src');
middle_img.src = 'img/' + middle_src;
var big_img_src = this.getAttribute('data_b_src');
big.style.backgroundImage = "url(img/" + big_img_src + ")";
}
}
var top_ = document.getElementsByClassName('top');
var square_ = document.getElementsByClassName('square');
top_[0].onmouseenter = function () {
square_[0].style.display = 'block';
big.style.display = 'block';
}
top_[0].onmouseleave = function () {
square_[0].style.display = 'none';
big.style.display = 'none';
}
top_[0].onmousemove = function (e) {
var mx = e.clientX || e.pageX;
var my = e.clientY || e.pageY;
var box_ = document.getElementsByClassName('box')[0];
var left = box_.offsetLeft;
var top = box_.offsetTop;
var x = mx - left - parseInt(square_[0].style.width) / 2;
var y = my - top - parseInt(square_[0].style.height) / 2;
x = x <= 0 ? 0 : x >= 350 - parseInt(square_[0].style.width) ? 350 - parseInt(square_[0].style.width) : x;
y = y <= 0 ? 0 : y >= 350 - parseInt(square_[0].style.height) ? 350 - parseInt(square_[0].style.height) : y;
square_[0].style.left = x + 'px';
square_[0].style.top = y + 'px';
big.style.backgroundPosition = (-x * 2.285) + "px " + (-y * 2.285) + "px";
}
var l_arrow = document.getElementsByClassName('l-arrow')[0];
var r_arrow = document.getElementsByClassName('r-arrow')[0];
var list = document.getElementsByClassName('little')[0];
l_arrow.onclick = function () {
list.style.left = 0;
}
r_arrow.onclick = function () {
list.style.left = -234+'px';
}
</script>
</body>
</html>效果图：
以上是关于JavaScript 放大镜的主要内容，如果未能解决你的问题，请参考以下文章
VSCode自定义代码片段12——JavaScript的Promise对象