1.鼠标移至图片上方，鼠标周围出现黄色的的正方形框，黄色矩形 框会随着鼠标的移动而移动；2.将黄色正方形框里的内容的长和宽均放大2.4倍，并在图片右边进行显示。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.small {
width: 450px;
height: 450px;
border: 1px solid #ccc;
float: left;
position: relative;
margin: 10px;
}
.big {
width: 450px;
height: 450px;
overflow: hidden;
position: relative;
display: none;
}
.mask {
width: 150px;
height: 150px;
background-color: yellow;
position: absolute;
top: 0px;
left: 0px;
opacity: .5;
cursor: move;
display: none;
}
.image {
position: absolute;
width: 450px;
height: 450px;
top: 0px;
left: 0px;
}
.img {
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<!-- 小图容器 -->
<div class="small">
<img src="./img/course12.png" alt="" class="image">
<!-- 透明图 -->
<div class="mask"></div>
</div>
<!-- 大图容器 -->
<div class="big">
<img src="./img/course12.png" alt="" class="img">
</div>
<script>
// 获取元素
const mask = document.querySelector('.mask')
const small = document.querySelector('.small')
const big = document.querySelector('.big')
const img = document.querySelector('.img')
const smallImg = document.querySelector('.image')
const ZOOM_SCALE = 2.4 // 放大倍数（大图是小图的2.4倍）
// 鼠标进入显示
small.addEventListener('mouseenter', function () {
mask.style.display = 'block'
big.style.display = 'block'
})
// 鼠标离开隐藏
small.addEventListener('mouseleave', function () {
mask.style.display = 'none'
big.style.display = 'none'
})
// 鼠标移动获取位置
small.addEventListener('mousemove', function (e) {
// 计算鼠标在小图容器内的相对位置
let x = e.pageX - this.offsetLeft // 鼠标相当于文档的位置
let y = e.pageY - this.offsetTop
// 让鼠标位于遮挡层中心
let maskX = x - mask.offsetWidth / 2
let maskY = y - mask.offsetHeight / 2
// 限制鼠标遮挡成不超过小图容器
let maskWidth = small.offsetWidth - mask.offsetWidth
let maskHeight = small.offsetHeight - mask.offsetHeight
if (maskX <= 0) {
maskX = 0
}else if (maskX >= maskWidth) {
maskX = maskWidth
}
if (maskY <= 0) {
maskY = 0
}else if (maskY >= maskHeight) {
maskY = maskHeight
}
// 设置者当场位置
mask.style.left = maskX + 'px'
mask.style.top = maskY + 'px'
// 技术按大图的反向移动距离
// 大图移动距离 = 遮罩位置 X （大图尺寸 - 大图容器尺寸） / （小图尺寸 - 遮罩尺寸）
let imgWidth = img.offsetWidth - small.offsetWidth
let imgHeight = img.offsetHeight - small.offsetHeight
let bigX = maskX * imgWidth / maskWidth;
let bigY = maskY * imgHeight / maskHeight;
// 移动大图（反向偏移，实现"跟随放大"）
img.style.left = (-bigX) + 'px';
img.style.top = (-bigY) + 'px';
})
// 初始化大图尺寸
function initZoomSize() {
const smallImg = document.querySelector('.image');
const smallWidth = small.offsetWidth;
const smallHeight = small.offsetHeight;
// 设置大图尺寸为小图的2.4倍
img.style.width = (smallWidth * ZOOM_SCALE) + 'px';
img.style.height = (smallHeight * ZOOM_SCALE) + 'px';
}
</script>
</body>
</html>