<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.small-box {
width: 200px;
height: 200px;
background-image: url(./img/10.jpg);
background-size: 200px 200px;
position: absolute;
top: 100px;
left: 100px;
}
.mask {
width: 100px;
height: 100px;
background-color: brown;
position: absolute;
opacity: 0.4;
display: none;
}
.big-box {
width: 400px;
height: 400px;
background-image: url(./img/10.jpg);
background-size: 800px 800px;
position: absolute;
top: 120px;
left: 350px;
display: none;
}
</style>
</head>
<body>
<div class="small-box">
<div class="mask"></div>
</div>
<div class="big-box"></div>
</body>
</html>
<script>
class magnifier {
constructor(newsmallbox, newmask, newbigbox) {
this.smallbox = newsmallbox;
this.mask = newmask;
this.bigbox = newbigbox;
}
//鼠标移入事件
onmouseover() {
let that = this;
this.smallbox.onmouseover = function () {
that.mask.style.display = "block";
that.bigbox.style.display = "block";
}
}
//鼠标离开事件
onmouseout() {
let that = this;
this.smallbox.onmouseout = function () {
that.mask.style.display = "none";
that.bigbox.style.display = "none";
}
}
//鼠标移动事件
onmousemove() {
let that = this;
this.smallbox.onmousemove = function (eve) {
//mask跟随鼠标移动，且鼠标在mask的中心（先保存）
let e = eve || event;
let left = e.pageX - this.offsetLeft - (that.mask.offsetWidth) / 2;
let top = e.pageY - this.offsetTop - (that.mask.offsetHeight) / 2;
//判断边界
if (left < 0) {
left = 0;
}
let maxleft = this.offsetWidth - that.mask.offsetWidth;
if (left > maxleft) {
left = maxleft;
}
if (top < 0) {
top = 0;
}
let maxtop = this.offsetHeight - that.mask.offsetHeight;
if (top > maxtop) {
top = maxtop;
}
//mask跟随鼠标移动，且鼠标在mask的中心
that.mask.style.top = top + "px";
that.mask.style.left = left + "px";
//鼠标移动时让大盒子的背景图跟着移动
let x = (left * that.bigbox.offsetWidth) / that.mask.offsetWidth;
let y = (top * that.bigbox.offsetHeight) / that.mask.offsetHeight;
//大背景图
that.bigbox.style.backgroundPositionX = -x + "px";
that.bigbox.style.backgroundPositionY = -y + "px";
}
}
}
let osmallbox = document.querySelector(".small-box");
let omask = document.querySelector(".mask");
let obigbox = document.querySelector(".big-box")
let mg = new magnifier(osmallbox, omask, obigbox);
mg.onmouseover();
mg.onmouseout();
mg.onmousemove();
</script>
