<!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> * { margin: 0; padding: 0; } .left { 350px; height: 350px; border: 1px solid gray; background: url(img/xiao.jpg); position: relative; } .move { 150px; height: 150px; background: orange; opacity: 0.5; position: absolute; top: 0; left: 0; } .right { 400px; height: 400px; background: url(img/da.jpg); position: absolute; left: 400px; top: 0; border: 1px solid gray; } .move, .right { /* 默认隐藏 */ display: none; } </style> </head> <body> <div class="left"> <div class="move"></div> </div> <div class="right"></div> <script> var left = document.querySelector('.left'); var right = document.querySelector('.right'); var move = document.querySelector('.move'); // 计算比例(大图未走过的距离 / 小图未走过的距离) var rate = 400 / 200; // 鼠标进入left, move和right显示出来 left.onmouseenter = function () { move.style.display = 'block'; right.style.display = 'block'; left.onmousemove = function (e) { e = e || window.event; // 鼠标的位置保持在move的中心 var moveLeft = e.clientX - move.offsetWidth / 2; var moveTop = e.clientY - move.offsetHeight / 2; // 限制范围 if (moveLeft <= 0) moveLeft = 0 if (moveTop <= 0) moveTop = 0 if (moveLeft >= left.clientWidth - move.offsetWidth) moveLeft = left.clientWidth - move.offsetWidth; if (moveTop >= left.clientHeight - move.offsetHeight) moveTop = left.clientHeight - move.offsetHeight; move.style.left = moveLeft + 'px'; move.style.top = moveTop + 'px'; // right背景图片位置跟随move的移动修改 right.style.backgroundPosition = -moveLeft * rate + 'px ' + (-moveTop * rate) + 'px'; } } // 鼠标离开left, move和right隐藏 left.onmouseleave = function () { move.style.display = 'none'; right.style.display = 'none'; } </script> </body> </html>