<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box { position: relative; } .small_box { background: darkorchid; width: 300px; height: 250px; border: 1px solid gainsboro; position: relative; } .small { width: 300px; height: 250px; } .layer { background: darkorange; opacity: .5; width: 150px; height: 150px; position: absolute; top: 0; left: 0; display: none; } .big_box { width: 400px; height: 300px; border: gainsboro 1px solid; background: greenyellow; position: absolute; top: 0; left: 300px; display: none; overflow: hidden; } .big { position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="box"> <div class="small_box"> <img src="../../../imgs/4.png" class="small"> <div class="layer"></div> </div> <div class="big_box"> <img src="../../../imgs/4.png" class="big"> </div> </div> <script> var box = document.getElementById('box'); var small_box = document.querySelector('.small_box'); var small = document.querySelector('.small'); var layer = document.querySelector('.layer'); var big_box = document.querySelector('.big_box'); var big = document.querySelector('.big'); small_box.addEventListener('mouseover', function() { layer.style.display = 'block'; big_box.style.display = 'block'; layer.style.cursor = 'move'; }) small_box.addEventListener('mouseout', function(e) { layer.style.display = 'none'; big_box.style.display = 'none'; }) layer.addEventListener('mousemove', function(e) { //获得鼠标位置 var layerX = e.pageX - layer.offsetWidth / 2; var layerY = e.pageY - layer.offsetHeight / 2; //限制遮盖层X轴的移动位置 layerX = layerX < 0 ? layerX = 0 : layerX; var maxX = small.offsetWidth - layer.offsetWidth; layerX = layerX > maxX ? layerX = maxX : layerX; //限制遮盖层Y轴的移动位置 layerY = layerY < 0 ? layerY = 0 : layerY; var maxY = small.offsetHeight - layer.offsetHeight; layerY = layerY > maxY ? layerY = 100 : layerY; //赋值给layer的 top 和 left layer.style.left = layerX + 'px'; layer.style.top = layerY + 'px'; // 遮挡层移动距离 layerX 和 layerY // 遮挡层的最大移动距离 maxX 和 maxY // 大图片最大移动距离 bigMaxX 和 bigMaxY var bigMaxX = big.offsetWidth - big_box.offsetWidth; var bigMaxY = big.offsetHeight - big_box.offsetHeight; // 大图的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离 var bigX = layerX * bigMaxX / maxX; var bigY = layerY * bigMaxY / maxY; big.style.left = -bigX + 'px';//因为是反方向移动，所以是 负值 big.style.top = -bigY + 'px'; }) </script> </body> </html>