图片鼠标滚动放大缩小

图片鼠标滚动放大缩小

class ScrollPic {
    constructor(opt = {}) {
      console.log(opt, 'opt');
      this.opt = this.initOpt(opt);
      this.root = document.querySelector(this.opt.root);
      console.log(this.root, '7');
      this.initScale = 1;
      this.init();
    }

    initOpt(opt) {
      return Object.assign(
        {},
        {
          root: null,
          scaleMax: 2,
          scaleMin: 0.2,
          step: 0.05,
        },
        opt
      );
    }

    init() {
      const fn = this.throttle(this.scrollEvent, 20);
      this.root.addEventListener('wheel', fn, {
        capture: false,
        passive: true,
      });
    }
    scrollEvent = (evt) => {
      const e = evt;
      let x = 0;
      let y = 0;
      if (!isNaN(e.wheelDeltaX)) {
        x = e.wheelDeltaX / 120;
      } else if (!isNaN(e.deltaX)) {
        x = (e.deltaX / 120) * -3;
      }
      if (!isNaN(e.wheelDeltaY)) {
        y = e.wheelDeltaY / 120;
      } else if (!isNaN(e.deltaY)) {
        y = (e.deltaY / 120) * -3;
      } else if (!isNaN(e.wheelDelta)) {
        y = e.wheelDelta / 120;
      }
      if (x > 0 && x < 1) {
        x = 1;
      } else if (x < 0 && x > -1) {
        x = -1;
      }
      if (y > 0 && y < 1) {
        y = 1;
      } else if (y < 0 && y > -1) {
        y = -1;
      }
      this.scale(y);
    }
    scale(y) {
      console.log(this.opt.step);
      y *= this.opt.step;
      const img = this.root.querySelector('img');
      this.initScale = this.initScale + y;
      const res = Math.max(this.opt.scaleMin, Math.min(this.opt.scaleMax, this.initScale));
      img.style.setProperty('transform', `scale(${res})`);
    }
  }