tips:
copy my code to your VsCode,then,change the img by yourself.Pay attention to the different size(px) of two img.
<!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/001.jpg" width="350" alt="" />
<div class="mask" id="mask"></div>
</div>
<div class="big" id="bigBox">
<img id="bigImg" src="images/0001.jpg" width="800" alt="" />
</div>
</div>
</body>
<script src="common.js"></script>
<script>
/* 需求分析：切入点交互
1.鼠标移入小盒子small：显示大盒子big与遮罩层mask
2.鼠标移出小盒子small：隐藏大盒子big与遮罩层mask
3.鼠标移动小盒子small：
a.mask跟随鼠标移动
b.鼠标在mask中心
c.mask边界检测
d.大盒子的图片对应移动
* 假如mask是50px*50px,大盒子是100px*100px,鼠标每移动1px，大盒子图片移动2px
* 100 / 50 * 1 = 2
*/
//获取元素
let box = document.querySelector('#box') //父盒子
let smallBox = document.querySelector('#smallBox') //小盒子
let bigBox = document.querySelector('#bigBox') //大盒子
let bigImg = document.querySelector('#bigImg') //大盒子图片
let mask = document.querySelector('#mask') //遮罩盒子
//鼠标移入小盒子
smallBox.onmouseenter = function () {
//鼠标移入小盒子后显示大盒子和遮罩盒子
bigBox.style.display = 'block'
mask.style.display = 'block'
}
//鼠标在小盒子内移动
smallBox.onmousemove = function (e) {
//a.mask跟随鼠标移动
/*
e.pageX: 鼠标触发点到页面边缘的距离
box.offsetLeft: 父盒子box左边框到页面的距离
鼠标触发点到smallBox的距离: e.pageX - box.offsetLeft
*/
let x = e.pageX - box.offsetLeft
let y = e.pageY - box.offsetTop
//b.鼠标在mask中心
/*
让x和y往左上角偏移 mask宽高的一半
*/
x -= mask.offsetWidth / 2
y -= mask.offsetHeight / 2
//c.mask边界检测 mask只能在smallBox内部移动
/*
0 < x < smallBox宽度 350 - mask宽度 175
0 < y < smallBox高度 350 - mask高度 175
*/
x = x < 0 ? 0 : x
x = x > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : x
// x = x > 175 ? 175 : x
y = y < 0 ? 0 : y
y = y > (box.offsetHeight - mask.offsetHeight) ? box.offsetHeight - mask.offsetHeight : y
// y = y > 175 ? 175 : y
//d.大盒子的图片对应移动
/*
如果mask盒子移动1px 大盒子移动倍数 = 大盒子宽高/mask宽高
细节: 如果mask往右移动,大盒子图片就要往左移动 mask往下移,大盒子图片就要往上移
*/
bigImg.style.left = -x * bigBox.offsetWidth / mask.offsetWidth + 'px'
bigImg.style.top = -y * bigBox.offsetHeight / mask.offsetHeight + 'px'
mask.style.left = x + 'px'
mask.style.top = y + 'px'
}
//鼠标移出小盒子
smallBox.onmouseleave = function () {
//鼠标移出小盒子后隐藏大盒子和遮罩盒子
bigBox.style.display = 'none'
mask.style.display = 'none'
}
</script>
</html>
