• 图片鼠标滚动放大缩小


    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})`);
        }
      }
  • 相关阅读:
    如何实现浏览器内多个标签页之间的通信?
    vue组件库的基本开发步骤(源代码)
    vue组件库的基本开发步骤
    Websocket原理
    TCP和UDP的区别
    一句话概括 tcp三次握手
    简单说一下你对http和https的理解
    .Ajax(async异步与sync同步)
    get和post请求方式的区别
    面试易忽略状态码
  • 原文地址:https://www.cnblogs.com/yxfboke/p/14304485.html
Copyright © 2020-2023  润新知