<!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>
.container {
position: relative;
}
.small {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #ccc;
/* 测试 */
margin-top: 201px;
margin-left: 263px;
}
.small>img {
width: 100%;
height: 100%;
}
.big {
display: none;
position: absolute;
left: 522px;
top: 0;
width: 400px;
height: 400px;
border: 1px solid #ccc;
overflow: hidden;
}
.big>img {
position: absolute;
width: 800px;
height: 800px;
}
.mask {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: orange;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="container">
<div class="small">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi3%2F1637289231%2FO1CN01Ldp9fc2I3qkCMF8H5_%21%211637289231.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644506916&t=6e9b0c11f89b561cccbfbeb74b76ae89"
alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi3%2F1637289231%2FO1CN01Ldp9fc2I3qkCMF8H5_%21%211637289231.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644506916&t=6e9b0c11f89b561cccbfbeb74b76ae89"
alt="">
</div>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function () {
const small = $('.small')
const mask = $('.mask')
const big = $('.big')
small.hover(function () {
mask.css("display", "block");
big.css("display", "block");
}, function () {
mask.css("display", "none");
big.css("display", "none");
})
small.on("mousemove", function (ev) {
let x = ev.pageX - (small.offset().left - small.scrollLeft()) - mask.width() / 2
let y = ev.pageY - (small.offset().top - small.scrollTop()) - mask.height() / 2
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
if (x > small.width() - mask.width()) {
x = small.width() - mask.width();
}
if (y > small.height() - mask.height()) {
y = small.height() - mask.height();
}
mask.css({ left: x, top: y });
// 放大倍数
rateX = 4;
$('.big>img').css({ left: -rateX * x, top: -rateX * y });
})
})
</script>
</body>
</html>