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