zoukankan      html  css  js  c++  java
  • 图片鼠标滚动放大缩小

    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})`);
        }
      }
  • 相关阅读:
    wifi详解(四)
    wifi详解(三)
    wifi详解(二)
    wifi详解(一)
    Linux下GPIO驱动
    wpa_cli调试工具的使用
    WAPI
    java spring使用Jackson过滤
    JPA 一对多双向映射 结果对象相互迭代 造成堆栈溢出问题方法
    Javassist指引(二)--ClassPool
  • 原文地址:https://www.cnblogs.com/yxfboke/p/14304485.html
Copyright © 2011-2022 走看看