动图效果：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .container, img, .bigger { width: 200px; height: 200px; } .container { display: inline-block; position: relative; background: url(images/1.png) center; background-size: contain; } img { position: absolute; top: 0; left: 0; } .box { width: 100px; height: 100px; background-color: #ffff7f; opacity: 0.7; position: absolute; } .bigger { position: relative; display: inline-block; overflow: hidden; } .biggerImg { position: absolute; transform: scale(2); transform-origin: top left; } </style> </head> <body> <div class="container"> <div class="box" style="top: 0px;left: 0px;"></div> </div> <div class="bigger"> <img class="biggerImg" src="./images/1.png" style="display: none;" /> </div> </body> <script type="text/javascript"> var container = document.querySelector(".container"); var box = document.querySelector(".box"); var bigger = document.querySelector(".biggerImg"); var width = box.parentNode.offsetWidth; var height = box.parentNode.offsetHeight; container.addEventListener("mousedown", function() { bigger.style.display = "block"; container.addEventListener("mousemove", mouseMove); container.addEventListener("mouseup", function() { bigger.style.display = "none"; container.removeEventListener("mousemove", mouseMove); }) }); function mouseMove(e) { if (e.clientY - 50 < 0) { box.style.top = 0; bigger.style.top = 0; } else if (e.clientY - 50 > 100) { box.style.top = 100; bigger.style.top = 100; } else { box.style.top = e.clientY - 50 + "px"; bigger.style.top = -2 * (e.clientY - 50) + "px"; } if (e.clientX - 50 < 0) { box.style.left = 0; bigger.style.left = 0; } else if (e.clientX - 50 > 100) { box.style.left = 100; bigger.style.left = 100; } else { box.style.left = e.clientX - 50 + "px"; bigger.style.left = -2 * (e.clientX - 50) + "px"; } } </script> </html>