图片定点缩放（稳定版），以鼠标为中心点进行缩放

MysTic_

于 2024-09-28 18:49:09 发布

阅读量226

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/MysTic_/article/details/142619744

版权

<!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 {
        width: 360px;
        aspect-ratio: 16/9;
        overflow: hidden;
      }
      .wrap {
        /* position: relative; */
        width: 100%;
        height: 100%;
      }
      .img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="wrap">
        <img class="img" src="./test.png" alt="" />
      </div>
    </div>
  </body>
  <script>
    const container = document.querySelector(".container");
    const wrap = document.querySelector(".wrap");
    const img = document.querySelector(".img");

    let factor = {
      x: 0,
      y: 0,
    };
    let scale = 1;

    container.addEventListener("wheel", (e) => {
      wrap.style.transformOrigin = "0 0";

      const { width, height } = wrap.getBoundingClientRect();
      const { offsetX, offsetY } = e;
      console.log(width, height);

      let _scale = scale;
      _scale += e.deltaY < 0 ? -0.1 : 0.1;
      if (_scale <= 1) {
        factor = {
          x: 0,
          y: 0,
        };
        scale = 1;
        wrap.style.transform = `translate(${factor.x}px, ${factor.y}px) scale(${scale})`;
        return;
      }
      const oWidth = width * scale;
      const oHeight = height * scale;

      const nWidth = width * _scale;
      const nHeight = height * _scale;

      const dWidth = oWidth - nWidth;
      const dHeight = oHeight - nHeight;

      const ratioX = offsetX / width;
      const ratioY = offsetY / height;

      const deltaX = dWidth * ratioX;
      const deltaY = dHeight * ratioY;

      factor.x += deltaX;
      factor.y += deltaY;

      scale = _scale;

      wrap.style.transform = `translate(${factor.x}px, ${factor.y}px) scale(${scale})`;
    });
  </script>
</html>