zoukankan      html  css  js  c++  java
  • 根据滚动条触发动画

    /*
            用法
            new ScrollMoveAnimate([
    
              // 一个对象代表一个监听范围  可传多个
              {
                start: 100,  // 滚动条触发开始位置
                end: 300, // 滚动条触发结束位置
                frames: 5, // 序列帧数量
                callback: index =>  {   // 回调函数 返回当前需要显示的序列帧的下标
                  console.log(index)
                }
              }
    
            ])
    */
    
    export default class ScrollMoveAnimate {
      constructor (animateInterval) {
        this.animateInterval = animateInterval
        this.addScrollEvent()
      }
      addScrollEvent () {
        window.onscroll = () =>{
          this.scrollT = document.documentElement.scrollTop || document.body.scrollTop
          this.scrolling()
        }
      }
      scrolling () {
        this.animateInterval.forEach(v => {
          if (this.scrollT >= v.start && this.scrollT < v.end) 
          v.callback(parseInt((this.scrollT - v.start) / ((v.end - v.start) / v.frames)))
        })
      }
    }
  • 相关阅读:
    Linux 相关scsi命令
    存储
    Multipath多路径冗余全解析
    Oracle中alter system命令参数之scope
    scipy安装失败
    font
    查看端口占用
    oracle参数优化
    组播
    sql给整数补零
  • 原文地址:https://www.cnblogs.com/chefweb/p/11745508.html
Copyright © 2011-2022 走看看