js 鼠标放到图片上放大某一部分效果

约 238 字小于 1 分钟
2025-07-30
动图效果

代码

<!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 <script 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>