目录
2.1 当鼠标经过/离开，mask显示/隐藏，大图片盒子显示/隐藏
（3）x坐标小于0 让他停在0的位置；x大于最大移动宽度，停在最大移动宽度的位置
1.结构功能分析
1.1 结构分析图
-
整个案例可以分为三个功能模块
-
鼠标经过小图片盒子， 遮挡层盒子 和 大图片盒子显示，离开隐藏2个盒子功能
-
黄色的遮挡层跟随鼠标移动功能。
-
移动黄色遮挡层，大图片跟随移动功能。
1.2 HTML和CSS代码展示
<div class="minBox">
<img src="images/bbd.jpg" alt="武魂殿女王" id="minImg">
<div class="mask"></div>
<div class="maxBox">
<img src="images/bbdbig.jpg" alt="" id="maxImg">
</div>
</div> <style>
* {
margin: 0;
padding: 0;
}
.minBox {
position: relative;
left: 200px;
top: 50px;
width: 300px;
height: 257px;
}
.mask {
/* 先隐藏遮罩层mask */
display: none;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: rgba(248, 215, 125, 0.3);
/* 鼠标移动 移动图标 */
cursor: move;
border: 1px solid rgb(248, 215, 125);
}
.maxBox {
/* 先隐藏大图片盒子maxBox */
display: none;
position: absolute;
top: 0;
left: 340px;
width: 600px;
height: 427px;
border: 1px solid #ccc;
overflow: hidden;
}
.maxBox img {
position: absolute;
top: 0;
left: 0;
}
</style>2.JS分析+代码
2.1 当鼠标经过/离开，mask显示/隐藏，大图片盒子显示/隐藏
//先获取我们需要用到得到元素
var minBox = document.querySelector('.minBox');
var mask = document.querySelector('.mask');
var maxBox = document.querySelector('.maxBox');
//鼠标经过事件 mouseover 隐藏 none 显示 block
minBox.addEventListener('mouseover', function () {
mask.style.display = 'block';
maxBox.style.display = 'block';
})
//鼠标离开事件 mouseout
minBox.addEventListener('mouseout', function () {
mask.style.display = 'none';
maxBox.style.display = 'none';
})2.2 遮罩层跟随鼠标移动
（1）先计算出鼠标在盒子内的坐标
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;（2）把计算好的左边赋值给遮罩层
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;（3）x坐标小于0 让他停在0的位置；x大于最大移动宽度，停在最大移动宽度的位置
！！！！ 最大移动宽度和高度 = minBox的宽度/高度-mask的宽度/高度
var maxMoveWidth = minBox.offsetWidth - mask.offsetWidth;
var maxMoveHeigh = minBox.offsetHeight - mask.offsetHeight;
//if判断遮罩层移动不超过小图片盒子边框
//mask 移动的距离 x轴
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maxMoveWidth) {
maskX = maxMoveWidth;
}
//mask 移动的距离 x轴
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maxMoveHeigh) {
maskY = maxMoveHeigh;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
2.3 移动遮罩层，大图片跟着移动
！！！！大图片移动距离=（遮罩层移动距离 X 大图片最大移动距离）/ 遮罩层最大移动距离
var maxImg = document.querySelector('#maxImg');
//大图片最大移动距离
var maxBigMoveX = maxImg.offsetWidth - maxBox.offsetWidth;
var maxBigMoveY = maxImg.offsetHeight - maxBox.offsetHeight;
var bigMoveX = maskX * maxBigMoveX / maxMoveWidth;
var bigMoveY = maskY * maxBigMoveY / maxMoveHeigh;
maxImg.style.left = -bigMoveX + 'px';
maxImg.style.top = -bigMoveY + 'px';3.最终效果图
