<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 400px; height: 400px; margin-left: 60px; margin-top: 100px; position: relative; } #small { width: 100%; height: 100%; position: relative; } #small img { position: absolute; } #mask { width: 140px; height: 140px; position: absolute; background: rgba(230,230,45,0.58); display: none; } #big { position: absolute; left: 410px; top: 0px; width: 400px; height: 400px; display: none; overflow: hidden; } #big img { width: 800px; height: 800px; display: block; position: absolute; } } </style> </head> <body> <div id='box'> <div id='small'> <img src="images/small.webp"> <div id='mask'></div> </div> <div id='big'> <img src="images/big.jpg" id='pic'> </div> </div> <script> var box = document.getElementById('box'); var mask = document.getElementById('mask'); var big = document.getElementById('big'); var pic = document.getElementById('pic'); box.onmouseover = function() { mask.style.display = 'block'; big.style.display = 'block' } box.onmousemove = function(e) { var maskX = e.pageX - box.offsetLeft -70; var maskY = e.pageY - box.offsetTop -70; maskX = (maskX < 0) ? 0 : maskX; maskX = (maskX > box.offsetWidth - mask.offsetWidth) ? (box.offsetWidth - mask.offsetWidth) : maskX; maskY = (maskY < 0) ? 0 : maskY; maskY = (maskY > box.offsetWidth - mask.offsetWidth) ? (box.offsetWidth - mask.offsetWidth) : maskY; mask.style.left = maskX + 'px'; mask.style.top = maskY + 'px'; var maxMask = box.offsetWidth - mask.offsetWidth; var maxBig = pic.offsetWidth - box.offsetWidth; var x = maskX / maxMask * maxBig; var y = maskY / maxMask * maxBig; pic.style.left = -x + 'px'; pic.style.top = -y + 'px'; } box.onmouseout = function() { mask.style.display = 'none'; big.style.display = 'none' } </script> </body> </html>
运行结果:
