<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { position: relative; } .small { position: relative; 200px; height: 200px; border: 1px solid #ccc; /* 测试 */ margin-top: 201px; margin-left: 263px; } .small>img { 100%; height: 100%; } .big { display: none; position: absolute; left: 522px; top: 0; 400px; height: 400px; border: 1px solid #ccc; overflow: hidden; } .big>img { position: absolute; 800px; height: 800px; } .mask { display: none; position: absolute; left: 0; top: 0; 100px; height: 100px; background-color: orange; opacity: 0.5; } </style> </head> <body> <div class="container"> <div class="small"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi3%2F1637289231%2FO1CN01Ldp9fc2I3qkCMF8H5_%21%211637289231.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644506916&t=6e9b0c11f89b561cccbfbeb74b76ae89" alt=""> <div class="mask"></div> </div> <div class="big"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi3%2F1637289231%2FO1CN01Ldp9fc2I3qkCMF8H5_%21%211637289231.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644506916&t=6e9b0c11f89b561cccbfbeb74b76ae89" alt=""> </div> </div> <script src="./jquery-1.12.4.js"></script> <script> $(function () { const small = $('.small') const mask = $('.mask') const big = $('.big') small.hover(function () { mask.css("display", "block"); big.css("display", "block"); }, function () { mask.css("display", "none"); big.css("display", "none"); }) small.on("mousemove", function (ev) { let x = ev.pageX - (small.offset().left - small.scrollLeft()) - mask.width() / 2 let y = ev.pageY - (small.offset().top - small.scrollTop()) - mask.height() / 2 if (x < 0) { x = 0; } if (y < 0) { y = 0; } if (x > small.width() - mask.width()) { x = small.width() - mask.width(); } if (y > small.height() - mask.height()) { y = small.height() - mask.height(); } mask.css({ left: x, top: y }); // 放大倍数 rateX = 4; $('.big>img').css({ left: -rateX * x, top: -rateX * y }); }) }) </script> </body> </html>