效果图： 左边是商品图片，右边是放大效果
代码：记得把图片路径换成自己的
<style> .con{ padding: 200px 0 0 200px; } .box{ width: 300px; box-sizing: border-box; position: relative; } .box img{ width: 100%; } .mask{ display: none; position: absolute; width: 100px; height: 100px; top: 0; left: 0; background-color: yellow; opacity: .5; cursor: move; /* transform: translate(-50%, -50%); */ } .big{ display: none; width: 600px; height: 600px; position: absolute; left: 550px; top: 200px; background-color: pink; border: solid 2px black; overflow: hidden; z-index: 999; } .big img{ width: 1000px; display: block; position: absolute; top: 0; left: 0; } </style> <div class="con"> <div class="box"> <img src="img/花子.jpg" alt=""> <!-- 遮挡层 --> <div class="mask"></div> </div> <div class="big"> <img src="img/花子.jpg" alt="" class="bigimg"> </div> </div> <!-- 案例分析： 1、整个案例可以分为三个功能模块 2、鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏两个盒子功能 3、黄色的遮挡层跟随鼠标功能 4、移动黄色遮挡层，大图片跟随移动功能 5、获得鼠标在盒子的坐标 6、把数值给遮挡层作为left和top值 7、此时用到鼠标移动事件，但是还是在小图片盒子内移动 8、遮挡层不能超出雄安盒子范围 9、如果小于0，就把坐标设置为0q 10、求大图片的移动距离公式 遮挡层/遮挡层最大移动距离 = 大图片移动距离/大图片最大移动距离 --> <script> window.addEventListener('load', function(){ var box = document.querySelector('.box'); var mask = document.querySelector('.mask'); var big = document.querySelector('.big'); // 鼠标经过box时 大盒子 big 和遮挡层 mask 显示 box.addEventListener('mouseover', function(){ mask.style.display = 'block'; big.style.display = 'block'; }) box.addEventListener('mouseout', function(){ mask.style.display = 'none'; big.style.display = 'none'; }) box.addEventListener('mousemove', function(e){ var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; // 遮挡层最大移动距离 var maskMax = box.offsetWidth - mask.offsetWidth; var maskMaxY = box.offsetHeight - mask.offsetHeight; var maskX = x - mask.offsetWidth / 2; var maskY = y - mask.offsetHeight / 2; // 如果x坐标小于0，就让mask停在0的位置 if (maskX <= 0){ maskX = 0; }else if(maskX >= maskMax){ maskX = maskMax; } // Y坐标 if (maskY <= 0){ maskY = 0; }else if(maskY >= maskMaxY){ maskY = maskMaxY; } mask.style.left = maskX + 'px'; mask.style.top = maskY + 'px'; // 大图 var bigimg = document.querySelector('.bigimg'); // 大图可移动距离等于图片 - (大盒)容器宽度 var bigmax = bigimg.offsetWidth - big.offsetWidth; var bigmaxY = bigimg.offsetHeight - big.offsetHeight; console.log(bigimg.offsetWidth); console.log(bigmax); // 大图的移动距离,根据公式: 遮挡层/遮挡层最大移动距离 = 大图片移动距离/大图片最大移动距离 var bigX = maskX * bigmax / maskMax; var bigY = maskY * bigmaxY / maskMaxY; bigimg.style.left = -bigX + 'px'; bigimg.style.top = -bigY + 'px'; }) }) </script>