JS实现在DIV内拖动缩放图片

HTML

  <div id="father">
    <div id="box">
      <img src="https://i04piccdn.sogoucdn.com/5d60177b8e04757a">
      <div id="scale"></div>
    </div>
  </div>

CSS

    #box {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      position: absolute;
    }

    #father {
      width: 600px;
      height: 500px;
      background-color: rgb(203, 209, 150);
      position: relative;
    }

    img {
      width: 100%;
      height: 100%;
      cursor: move;
    }

    #scale {
      width: 20px;
      height: 20px;
      overflow: hidden;
      cursor: se-resize;
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: rgb(122, 191, 238);
    }

JS

    // father是图片移动缩放的范围, box是装图片的容器,scale是控制缩放的小图标
    let father = document.getElementById('father');
    let box = document.getElementById("box");
    let scale = document.getElementById("scale");

    // 图片移动效果
    box.onmousedown = function (ev) {
      let oEvent = ev;
      // 浏览器有一些图片的默认事件,这里要阻止
      oEvent.preventDefault();
      let disX = oEvent.clientX - box.offsetLeft;
      let disY = oEvent.clientY - box.offsetTop;
      father.onmousemove = function (ev) {
        oEvent = ev;
        oEvent.preventDefault();
        let x = oEvent.clientX - disX;
        let y = oEvent.clientY - disY;

        // 图形移动的边界判断
        x = x <= 0 ? 0 : x;
        x = x >= father.offsetWidth - box.offsetWidth ? father.offsetWidth - box.offsetWidth : x;
        y = y <= 0 ? 0 : y;
        y = y >= father.offsetHeight - box.offsetHeight ? father.offsetHeight - box.offsetHeight : y;
        box.style.left = x + 'px';
        box.style.top = y + 'px';
      }

      // 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
      father.onmouseleave = function () {
        father.onmousemove = null;
        father.onmouseup = null;
      }

      // 鼠标弹起后停止移动
      father.onmouseup = function () {
        father.onmousemove = null;
        father.onmouseup = null;
      }
    }

    // 图片缩放效果
    scale.onmousedown = function (e) {
      // 阻止冒泡,避免缩放时触发移动事件
      e.stopPropagation();
      e.preventDefault();
      let pos = {
        'w': box.offsetWidth,
        'h': box.offsetHeight,
        'x': e.clientX,
        'y': e.clientY
      };
      father.onmousemove = function (ev) {
        ev.preventDefault();
        // 设置图片的最小缩放为30*30
        let w = Math.max(30, ev.clientX - pos.x + pos.w)
        let h = Math.max(30, ev.clientY - pos.y + pos.h)

        // 设置图片的最大宽高
        w = w >= father.offsetWidth - box.offsetLeft ? father.offsetWidth - box.offsetLeft : w
        h = h >= father.offsetHeight - box.offsetTop ? father.offsetHeight - box.offsetTop : h
        box.style.width = w + 'px';
        box.style.height = h + 'px';
      }
      father.onmouseleave = function () {
        father.onmousemove = null;
        father.onmouseup = null;
      }
      father.onmouseup = function () {
        father.onmousemove = null;
        father.onmouseup = null;
      }
    }

线上案例

https://codepen.io/dingFY/full/abOyNoe

 

 

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料