js设置图片放大缩小拖动

zhou13528482267

已于 2023-11-13 16:46:35 修改

阅读量959

点赞数 2

文章标签： javascript 前端 html

于 2023-11-13 16:46:10 首次发布

本文链接：https://blog.csdn.net/zhou13528482267/article/details/134380660

版权

效果：

思路：在外层box进行相对定位relative，img设置绝对定位absolute；通过监听滚轮事件（wheel），设置样式缩放中心点（transformOrigin）和缩放转换（transform）；获取到图片大小和位置，设置对应图片宽度高度和top、left偏移；鼠标按下事件（mousedown）和鼠标移动事件（onmousemove），得出图片移动偏移量。

详细代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>图片拖拽与缩放</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    img {
      position: absolute;
      top: 200px;
      left: 500px;
      width: 800px;
    }
  </style>
</head>

<body>
  <div class="box">
    <img id="imgId" src="./test.jpg" alt="">
  </div>

  <script>
    //初始化缩放倍数
    let god_big = 1;
    let imgDom = document.getElementById("imgId");
    //监听滚轮事件
    imgDom.addEventListener("wheel", (event) => {
      //取消事件默认行为
      event.preventDefault();
      //获取是向上滚还是向下滚
      let delta = event.deltaY;
      if (delta > 0) {
        god_big -= 0.2;
      } else {
        god_big += 0.2;
      }

      let img_tag = document.getElementById("imgId");
      //计算鼠标点击相对于元素的偏移量
      const offsetX = (event.clientX - img_tag.getBoundingClientRect().left) / img_tag.getBoundingClientRect().width;
      const offsetY = (event.clientY - img_tag.getBoundingClientRect().top) / img_tag.getBoundingClientRect().height;
      //缩放中心点
      const transformOrigin = `${offsetX * 100}% ${offsetY * 100}%`;
      img_tag.style.transformOrigin = transformOrigin;
      //设置缩放转换
      img_tag.style.transform = `scale(${god_big})`;
      //调整图片大小和偏移位置
      let img_width = img_tag.getBoundingClientRect().width;
      let img_height = img_tag.getBoundingClientRect().height;
      let img_left = img_tag.getBoundingClientRect().left;
      let img_top = img_tag.getBoundingClientRect().top;
      img_tag.style.left = img_left + 'px';
      img_tag.style.top = img_top + 'px';
      img_tag.style.width = img_width + 'px';
      img_tag.style.height = img_height + 'px';
      //重置图片缩放转换、缩放中心、缩放倍数
      img_tag.style.transform = 'scale(1)';
      img_tag.style.transformOrigin = '0 0';
      god_big = 1;
    });
    //监听鼠标按下事件
    imgDom.addEventListener("mousedown", (event) => {
      //取消事件默认行为
      event.preventDefault();
      let img_tag = document.getElementById("imgId");
      let img_left = img_tag.getBoundingClientRect().left;
      let img_top = img_tag.getBoundingClientRect().top;
      let x = event.clientX;
      let y = event.clientY;
      //监听鼠标移动事件
      document.onmousemove = (event) => {
        let move_x = event.clientX - x;
        let move_y = event.clientY - y;
        img_tag.style.left = img_left + move_x + 'px';
        img_tag.style.top = img_top + move_y + 'px';
      }
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      }
    });

  </script>
</body>

</html>

zhou13528482267

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js设置图片放大缩小拖动

思路：在外层box进行相对定位relative，img设置绝对定位absolute；通过监听滚轮事件（wheel），设置样式缩放中心点（transformOrigin）和缩放转换（transform）；获取到图片大小和位置，设置对应图片宽度高度和top、left偏移；鼠标按下事件（mousedown）和鼠标移动事件（onmousemove），得出图片移动偏移量。
复制链接

扫一扫