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