废话不多说 解释都在代码里
<!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>
<style>
#box1 {
width: 400px;
height: 400px;
position: relative;
border: 1px solid black;
}
#zd {
width: 250px;
height: 250px;
background-color: #fede4f;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
#big {
width: 500px;
height: 500px;
border: 1px solid black;
position: absolute;
top: 0;
left: 410px;
overflow: hidden;
display: none;
}
#bigImg {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="box1">
<img src="../images/leftimg.jpg" alt="" width="400px" height="400px" />
<div id="zd"></div>
<div id="big">
<img src="../images/rimg.jpg" alt="" id="bigImg" />
</div>
</div>
<script>
//整个案例分为三个功能模块
// 1.鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能
window.addEventListener("load", function () {
var box1 = document.getElementById("box1");
var zd = document.getElementById("zd");
var big = document.getElementById("big");
box1.addEventListener("mouseover", function () {
zd.style.display = "block";
big.style.display = "block";
});
box1.addEventListener("mouseout", function () {
zd.style.display = "none";
big.style.display = "none";
});
});
// 黄色的遮挡层跟随鼠标功能
// 把鼠标坐标直接给遮挡层是不合适的,因为遮挡层所移动的位置是以父盒子为准的
// 所以我们要先获得鼠标在盒子,之后把数值给遮挡层作为left和top值。
// 此时用到鼠标移动事件,单是还是在小图片盒子内移动
box1.addEventListener("mousemove", function (e) {
// 先算出鼠标在小图片盒子内的坐标
var x = e.pageX - box1.offsetLeft;
var y = e.pageY - box1.offsetTop;
// console.log(x, y);
// 黄色遮挡层的高度为300 的一半为150,但是如果以后我们需要改动黄色遮挡层的高度,所以我们可以用表达式来表示黄色遮挡层的宽和高(zd.offsetWidth(这是黄色遮挡层的宽)/2和zd.offsetHeight(这是黄色遮挡层的高)/2)
// 黄色遮挡层跟随鼠标移动的位置,并保证鼠标出现在黄色遮挡层中心部分
// 遮挡层移动距离zdX和zdY
zdX = x - zd.offsetWidth / 2;
zdY = y - zd.offsetHeight / 2;
// 确定遮挡层移动区域,只能在小图片盒子里面移动
// 思路:如果zdX坐标小于零,就让遮挡层停在0的位置
// box1.offsetWidth和box1.offsetHeight为小图片盒子的宽度和高度
// zd.offsetWidth和zd.offsetHeight为遮挡层的宽度和高度
// 遮挡层最大移动距离 mzdX和mzdY
mzdX = box1.offsetWidth - zd.offsetWidth;
mzdY = box1.offsetHeight - zd.offsetHeight;
// if语句判断黄色遮挡层的移动距离
// if (zdX <= 0) {
// zdX = 0;
// } else if (zdX >= mzdX) {
// zdX = mzdX;
// }
// if (zdY <= 0) {
// zdY = 0;
// } else if (zdY >= mzdY) {
// zdY = mzdY;
// }
// 用三元表达式表达
zdX <= 0 ? (zdX = 0) : zdX >= mzdX ? (zdX = mzdX) : false;
zdY <= 0 ? (zdY = 0) : zdY >= mzdY ? (zdY = mzdY) : false;
// 黄色遮挡层跟随鼠标移动;
zd.style.left = zdX + "px";
zd.style.top = zdY + "px";
// 移动黄色遮挡层,大图片跟随移动功能
// 要保证大图片有随着黄色遮挡层移动的效果,就要保证黄色遮挡层和大图片按比例移动
// 计算公式为:遮挡层移动距离/遮挡层最大移动距离=大图片移动距离/大图片最大移动距离
// 所以 大图片移动距离 =遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离
var bigImg = document.getElementById("bigImg");
// 大图片最大移动距离BigX和BigY
BigX = bigImg.offsetWidth - big.offsetWidth;
BigY = bigImg.offsetHeight - big.offsetHeight;
// 遮挡层移动距离zdX和zdY
// 遮挡层最大移动距离 mzdX和mzdY
// 大图片跟随遮挡层移动的距离为mBigX和mBigY
mBigX = (zdX * BigX) / mzdX;
mBigY = (zdY * BigY) / mzdY;
bigImg.style.left = -mBigX + "px";
bigImg.style.top = -mBigY + "px";
});
</script>
</body>
</html>