本周笔者偷个懒，没有学习新的知识，在网上买东西的时候看到了这个东西，感觉挺好玩，也为了巩固js操作原生DOM来实现一些动画，技术很菜，感觉不好还请您担待。
逛京东的时候刷到了一个类似放大镜的功能模块，感觉挺有意思，就自己操作实现了一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
position: relative;
margin: 0 auto;
width: 800px;
height: 600px;
}
#large-box {
position: absolute;
overflow: hidden;
top: 40px;
left: 450px;
width: 350px;
height: 350px;
border: 2px solid #3df;
display: none;
}
/*****注 : shadow、middle、large_img 他们成比例关系 shadow: middle == middle : large_img*****/
#large-box>img {
position: absolute;
top: 0px;
left: 0px;
width: 2160px;
height: 2160px;
}
#middle-box {
position: relative;
width: 360px;
height: 360px;
}
#middle-box>img {
width: 100%;
height: 100%;
}
#middle-box>#shadow {
position: absolute;
top: 0px;
left: 0px;
width: 60px;
height: 60px;
display: none;
background-color: rgba(20, 20, 20, 0.5);
}
#small-box {
margin-top: 10px;
width: 360px;
height: 60px;
}
#small-box>img {
width: 60px;
height: 100%;
}
.border {
border: 2px solid #3df
}
</style>
</head>
<body>
<div id="box">
<p id="middle-box">
<img src="./Imgs/picture1.jpg" alt="">
<span id="shadow"></span>
</p>
<p id="large-box">
<img src="./Imgs/picture1.jpg" alt="">
</p>
<p id="small-box">
<img src="./Imgs/picture1.jpg" alt="" class="border">
<img src="./Imgs/picture2.jpg" alt="">
<img src="./Imgs/picture3.jpg" alt="">
<img src="./Imgs/picture4.jpg" alt="">
<img src="./Imgs/picture5.jpg" alt="">
</p>
</div>
</body>
<script>
var omiddle = document.getElementById('middle-box'); //存放中间图片的盒子
class Picture {
// 属性
constructor() {
this.obox = document.getElementById('box'); //最大盒子
this.olarge = document.getElementById('large-box'); //存放大图片的盒子
this.olarge_Imgs = document.querySelector("#large-box>img"); //大图片
this.shadow = document.getElementById('shadow'); //遮罩层
this.omiddle_Imgs = document.querySelector("#middle-box>img"); //中图片
this.osmall = document.getElementById('small-box'); //存放最小图片的盒子
this.osmall_Imgs = document.querySelectorAll('#small-box>img'); //小图片
//定义图片数组
this.Imgs = ["./Imgs/picture1.jpg", "./Imgs/picture2.jpg", "./Imgs/picture3.jpg", "./Imgs/picture4.jpg",
"./Imgs/picture5.jpg"
];
this.index = 0; //Imgs 下标
this.index++;
}
// Tab 添加边框及其渲染
tab() {
var that = this;
for (var i = 0; i < that.osmall_Imgs.length; i++) {
(function (ind) {
that.osmall_Imgs[ind].onmouseenter = function () {
that.index = ind;
that.olarge_Imgs.src = that.Imgs[that.index];
that.omiddle_Imgs.src = that.Imgs[that.index];
for (var j = 0; j < that.osmall_Imgs.length; j++) {
that.osmall_Imgs[j].className = '';
}
that.osmall_Imgs[ind].className = 'border';
}
})(i)
}
}
//鼠标进入中图片，大图片区域显示
cutIn() {
this.olarge.style.display = 'block'; //划入大盒子显现
this.shadow.style.display = 'block'; //划入影影显示
}
//鼠标离开中图片，大图片区域不显示
cutOut() {
this.olarge.style.display = 'none'; //划出大盒子不显示
this.shadow.style.display = 'none'; //划出阴影不显示
}
move() {
// 给遮罩层添加移动效果
var that = this;
console.log(that.omiddle);
that.shadow.onmousemove = function (e) {
var ev = e || window.event;
var iL = ev.clientX - that.obox.offsetLeft - that.shadow.offsetWidth / 2;
var iT = ev.clientY - that.obox.offsetTop - that.shadow.offsetHeight / 2;
// 限定左侧方向
if (iL < 0) {
iL = 0;
}
//限定上侧方向
if (iT < 0) {
iT = 0;
}
//遮罩层的left可移动的最大范围
var iMaxL = omiddle.offsetWidth - that.shadow.offsetWidth;
if (iL >= iMaxL) {
iL = iMaxL;
}
//遮罩层的top可移动的最大范围
var iMaxT = omiddle.offsetHeight - that.shadow.offsetHeight;
console.log(iL, iT);
if (iT >= iMaxT) {
iT = iMaxT;
}
that.shadow.style.left = iL + "px";
that.shadow.style.top = iT + "px";
// 倍数
var bei = omiddle.offsetHeight / that.shadow.offsetHeight;
that.olarge_Imgs.style.left = -iL * bei + 'px';
that.olarge_Imgs.style.top = -iT * bei + 'px';
}
}
}
var p1 = new Picture();
p1.tab();
p1.move();
console.log(p1.move());
//鼠标进入中图片，大图片区域显示
omiddle.onmouseenter = function () {
p1.cutIn();
}
//鼠标离开中图片，大图片区域不显示
omiddle.onmouseleave = function () {
p1.cutOut();
}
</script>
</html>
这是实现京东放大镜的所有代码，如果感兴趣可以直接复制然后查看，只需替换一下图片路径即可
实现的效果图，如下：
