1. 程式人生 > 實用技巧 >圖片滑鼠滾動放大縮小

圖片滑鼠滾動放大縮小

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})`); } }