目录

?

1.结构功能分析

1.1?结构分析图

1.2 HTML和CSS代码展示

2.JS分析+代码

2.1 当鼠标经过/离开，mask显示/隐藏，大图片盒子显示/隐藏

2.2?遮罩层跟随鼠标移动

（1）先计算出鼠标在盒子内的坐标

（2）把计算好的左边赋值给遮罩层

（3）x坐标小于0 让他停在0的位置；x大于最大移动宽度，停在最大移动宽度的位置

2.3 移动遮罩层，大图片跟着移动

3.最终效果图

---

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.最终效果图

---

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。