<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#__bs_notify__ {
display: none !important;
}
/*上面的选择器不要删,否则内置预览会有个黑色的块,在下方写页面其他选择器*/
nav {
display: flex;
}
.xt {
width: 400px;
height: 400px;
border: 1px solid;
position: relative;
}
.xt>img {
width: 190px;
height: 257px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
.datu {
width: 400px;
height: 400px;
margin-left: 50px;
border: 1px solid;
position: relative;
overflow: hidden;
display: none;
}
.datu>p {
position: absolute;
left: 0;
top: 0;
width: 700px;
height: 700px;
z-index: 3;
}
.datu>p>img {
width: 380px;
height: 514px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
.mask {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: pink;
opacity: .5;
display: none;
}
</style>
</head>
<body>
<nav>
<div class="xt">
<img src="https://www.apple.com.cn/v/iphone/home/bk/images/overview/compare/compare_iphone_14_pro__cjmfbiggqhpy_large.jpg"
alt="">
<p class="mask"></p>
</div>
<div class="datu">
<p>
<img src="https://www.apple.com.cn/v/iphone/home/bk/images/overview/compare/compare_iphone_14_pro__cjmfbiggqhpy_large.jpg"
alt="">
</p>
</div>
</nav>
<script>
//获取所有元素
let mask = document.querySelector(".mask");
let datu = document.querySelector(".datu");
let xt = document.querySelector(".xt");
let p = document.querySelector(".datu>p")
let nav = document.querySelector("nav")
//鼠标移入显示mask块和放大的块
xt.addEventListener("mouseover", function () {
mask.style.display = "block"
datu.style.display = "block"
})
xt.addEventListener("mouseout", function () {
mask.style.display = "none"
datu.style.display = "none"
})
//鼠标移入隐藏mask块和放大的块
xt.addEventListener("mousemove", function (e) {
//获取鼠标在浏览器中的坐标e.pageX,e.pageY
//offsetLeft获取当前对象的左边距和上边距
//两者相减就是鼠标在盒子中的坐标
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
//将鼠标光标移入到遮罩层mask的中央位置
var maskx = x - mask.offsetWidth / 2
var masky = y - mask.offsetHeight / 2
//遮罩层父元素的宽-遮罩层的宽,剩余的就是可移动部分,即:max为最大可移动距离
var max = xt.offsetWidth - mask.offsetWidth
if (maskx <= 0) {
maskx = 0
} else if (maskx >= max) {
maskx = max;
}
//y坐标同上方解释同理
if (masky <= 0) {
masky = 0
} else if (masky >= max) {
masky = max;
}
// 将判断完的mask的xy坐标赋值给mask的上左边距
mask.style.left = maskx + "px"
mask.style.top = masky + "px"
//大图跟着滚动
//大图片最大可移动距离,解释同max的一样
var imgs = datu.offsetWidth - p.offsetWidth
// 由1/2=x/4可得x=1*4/2 所以大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
var bigx = maskx * imgs / max
var bigy = masky * imgs / max
//得到大图片移动距离,然后赋值给p标签上,让p标签处于小图的移动事件内,在小图移动,大图片跟着动
p.style.left = bigx + "px"
p.style.top = bigy + "px"
})
</script>
</body>
</html>
06-02
408
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-17
532
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)