图片放大缩放合移动功能
2021-10-28 15:21:34

export function showBigImage(url) {
  // // 创建图片
  var imgObj = new Image();
  imgObj.src = url;

  let bodyW = document.body.clientWidth;
  let bodyH = document.body.clientHeight;

  let size = 0;
  // 创建图片父级
  let div = document.createElement('div');
  div.setAttribute('style', 'cursor: pointer; display: none;position: fixed; left: 0;top: 0;right: 0;bottom: 0;background:rgba(0,0,0,0.5);z-index: 9999'); // 背景
  div.style.width = bodyW + 'px';
  div.style.height = bodyH + 'px';
  if (typeof (url) !== "function" && url.indexOf("http") === 0) {
    div.style.display = "block";
  }
  div.appendChild(imgObj);
  document.getElementsByTagName('body')[0].appendChild(div);
  // 图片加载成功之后
  imgObj.onload = function () {
    imgObj.setAttribute('style', `position: relative;`);
    var iw = imgObj.width;
    var ih = imgObj.height;
    var dw = div.style.width.split('p')[0];
    var dh = div.style.height.split('p')[0];
    if (iw >= ih) {
      var nih = (ih / iw) * dw;
      if (nih > dh) {
        this.style.height = dh + 'px';
        this.style.left = (dw - iw / ih * dh) / 2 + 'px';
      } else {
        this.style.width = dw + 'px';
        this.style.top = (dh - nih) / 2 + 'px';
      }
    } else {
      var niw = (dh / ih) * iw;
      this.style.height = dh + 'px';
      this.style.left = (dw - niw) / 2 + 'px';
    }
  };

  // 图片的滚动放大
  function mWheel(e) {
    let ev = e || window.event;
    // let dir = ev.deltaY;
    let dir = ev.detail ? ev.detail * (-120) : ev.wheelDelta;
    // dir = -dir;
    if (dir > 0) {
      size += dir / 1000;
      imgObj.style.transform = `scale(${1 + size})`;
      // imgObj.style.transform = 'scale('+Number(1 + size )+')';
    } else {
      size += dir / 1000;
      if (size < -1) {
        size = -1;
        imgObj.style.transform = `scale(${1 + size})`;
        return;
      }
      imgObj.style.transform = `scale(${1 + size})`;
    }
  };

  // 判断浏览器是否支持滚动事件
  var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; // FF doesn't recognize mousewheel as of FF3.x
  // 调用图片放大
  if (div.attachEvent) {
    // if IE (and Opera depending on user setting)
    div.attachEvent("on" + mousewheelevt, mWheel);
  } else if (div.addEventListener) {
    // WC3 browsers
    div.addEventListener(mousewheelevt, mWheel, false);
  }

  // 拖动图片
  div.onmousedown = function (e) {
    var flagInner = true;
    var ev = e || window.event;

    var mPageX = ev.pageX;
    var mPageY = ev.pageY;

    var disX = ev.pageX - imgObj.offsetLeft;
    var disY = ev.pageY - imgObj.offsetTop;
    this.onmousemove = function (e) {
      ev = e || window.event;
      var mPageX2 = ev.pageX;
      var mPageY2 = ev.pageY;
      if ((mPageX2 - mPageX > 5) || (mPageY2 - mPageY > 5) || (mPageX - mPageX2 > 5) || (mPageY - mPageY2 > 5)) {
        flagInner = false;
      }
      ev.preventDefault();
      var moveX = ev.pageX - disX;
      var moveY = ev.pageY - disY;

      imgObj.style.left = moveX + "px";
      imgObj.style.top = moveY + "px";
    };
    this.onmouseup = function (e) {
      if (flagInner) {
        if (this.isIE || this.isIE11) {
          this.removeNode(true);
        } else {
          this.remove();
        }
        this.isIE = function isIE() {
          if (!!window.ActiveXObject || "ActiveXObject" in window) {
            return true;
          } else {
            return false;
          }
        };
        this.isIE11 = function isIE11() {
          if ((/Trident/7./).test(navigator.userAgent)) {
            return true;
          } else {
            return false;
          }
        };
      }
      this.onmousemove = null;
      this.onmouseup = null;
    };
    // disable default wheel action of scrolling page
    if (ev.preventDefault) {
      ev.preventDefault();
    } else {
      return false;
    }
  };
}