ps：放大镜的功能
记得下载本文最后的图片然后修改相应的文件路径！！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small {
position: relative;
}
.box img {
vertical-align: top;
}
#bigBox>img {
/*是让里面的图片脱标，为的就是让里面的图片进行一个移动*/
position: absolute;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small" id="smallBox">
<img src="../images/01.jpg" width="350" alt="" />
<div class="mask" id="mask"></div>
</div>
<div class="big" id="bigBox">
<img id="bigImg" src="../images/01.jpg" width="800" alt="" />
</div>
</div>
<script>
//1.获取元素
let smallBox = document.getElementById('smallBox'); //小盒子
let mask = document.getElementById('mask'); //遮罩
let bigBox = document.getElementById('bigBox'); //大盒子
let bigImg = document.getElementById('bigImg'); //大图片
let box = document.getElementById('box'); //最外面box box的offsetLeft才是到body的距离
//2.注册事件
//2.1 鼠标移入
smallBox.onmouseover = function () {
//3.事件处理:显示big大图片盒子和mask遮罩盒子
bigBox.style.display = 'block';
mask.style.display = 'block';
};
//2.2 鼠标移出
smallBox.onmouseout = function () {
//3.事件处理:隐藏big大图片盒子和mask遮罩盒子
bigBox.style.display = 'none';
mask.style.display = 'none';
};
//2.3 鼠标移动
smallBox.onmousemove = function (e) {
e = e || window.event;
//3.事件处理:
//a.遮罩mask跟随鼠标移动
let x = e.pageX - box.offsetLeft;
let y = e.pageY - box.offsetTop;
//b.鼠标在mask中心位置
x -= mask.offsetWidth / 2;
y -= mask.offsetHeight / 2;
//边界检测
x = x < 0 ? 0 : x;
x = x > 175 ? 175 : x;
y = y < 0 ? 0 : y;
y = y > 175 ? 175 : y;
mask.style.left = x + 'px';
mask.style.top = y + 'px';
//d.bigImg相应移动
bigImg.style.left = -x * bigBox.offsetWidth / mask.offsetWidth + 'px';
bigImg.style.top = -y * bigBox.offsetHeight / mask.offsetHeight + 'px';
};
</script>
</body>
</html>