<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
position: relative;
width: 400px;
height: 400px;
box-sizing: border-box;
border: 1px solid #ccc;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: #F5FE4F;
opacity: .5;
cursor: move;
display: none;
}
.box2 {
position: absolute;
display: none;
top: 0;
left: 410px;
width: 500px;
height: 500px;
overflow: hidden;
border: 1px solid #ccc;
box-sizing: border-box;
}
.bigImg {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box1">
<img src="images/big.jpg" alt="" width="100%" height="100%">
<div class="mask"></div>
<div class="box2">
<img src="images/big.jpg" alt="" class="bigImg">
</div>
</div>
<script>
var smallBox = document.querySelector('.box1'); // 获取产品盒子
var mask = document.querySelector('.mask'); // 获取蒙板
var bigBox = document.querySelector('.box2'); // 获取放大图 的盒子
var bigImg = document.querySelector('.bigImg'); // 获取 大图
smallBox.addEventListener('mouseover', function () { // 注册鼠标进入事件 显示大图盒子 和 蒙板
mask.style.display = 'block';
bigBox.style.display = 'block';
});
smallBox.addEventListener('mouseout', function () { // 注册鼠标离开事件 隐藏大图盒子 和 蒙板
mask.style.display = 'none';
bigBox.style.display = 'none';
});
smallBox.addEventListener('mousemove', function (e) { // 注册鼠标移动事件
var x = e.pageX - smallBox.offsetLeft; // 这里将 鼠标在产品盒子内的 X坐标赋值给x
var y = e.pageY - smallBox.offsetTop; // 这里将 鼠标在产品盒子内的 Y坐标赋值给y
var Max1 = smallBox.offsetWidth - mask.offsetWidth; // 这里将 蒙板在产品盒子内能位移的最大值 赋值给Max1 (因为是正方形 所有X,Y轴一样）
var left = x - mask.offsetWidth / 2; // 这里表示 使鼠标位于蒙板X轴方向的中部 (即 蒙板X移动的距离要向左多移动自身的一半
if (left <= 0) { // 判断 是否到达边界
left = 0;
} else if (left >= Max1) {
left = Max1;
}
mask.style.left = left + 'px'; // 将移动X坐标值转换为字符串 赋值给蒙板X轴
var top = y - mask.offsetWidth / 2; // // 这里表示 使鼠标位于蒙板Y轴方向的中部 (即 蒙板Y移动的距离要向上多移动自身的一半
if (top <= 0) { // 判断 是否到达边界
top = 0;
} else if (top >= Max1) {
top = Max1;
}
mask.style.top = top + 'px'; // 将移动Y坐标的值转换为字符串 赋值给蒙板Y轴
var Max2 = bigImg.offsetWidth - bigBox.offsetWidth; // 这里计算得到 大图的最大位移量
bigImg.style.left = -(left * Max2 / Max1) + 'px'; // 要是大图与蒙板联动 需要按照最大位移量的比例来达到预想效果 同时使运动方向相反 因此前面加负号
bigImg.style.top = -(top * Max2 / Max1) + 'px';
})
</script>
</body>
</html>
