zoukankan      html  css  js  c++  java
  • JS DIV列表自动滚动带停顿,滚动到底部后自动滚动到顶部

     setInterval -- 间隔执行函数;element.scrollTop -- 元素滚动条距头部的距离;

    因为执行代码需要时间,所以最终动态时间会比设置的要慢

        var slide = new Slide({
            id:'grid-body',//元素ID
            onceHeight:43,//每行高度
            onceTime:500,//滑动一次用时毫秒 
            wait:1500//滑动后停顿毫秒
        });
        slide.start();
    function Slide(options){
        this.element = document.getElementById(options.id); //元素
        this.onceHeight = options.onceHeight || 40;//滚动距离
        this.onceTime = options.onceTime || 200;//滚动一次需要的时间
        this.wait = options.wait || 1000;//等待时长(滚动一次后多久滚动下一次 单位:毫秒)
        this.frame = 1;//帧数
        this.frequency = this.onceTime / (this.onceHeight / this.frame);
        this.waitPoint = this.onceTime / this.frequency;
        this.coming = this.waitPoint + this.wait / this.frequency;
        this.prevFrame = this.element.scrollHeight / (this.onceTime / this.frequency);
        this.start = function(){
            let _this=this, j=this.waitPoint, isPrev=false;
            //用户滚动鼠标时暂停滚动
            _this.element.onmousewheel = function(){
                //准备停顿
                j = _this.waitPoint;
            }
            //开始滚动
            setInterval(function(){
                if(isPrev){//滚回顶部
                    _this.element.scrollTop -= _this.prevFrame; 
                    //判断是否滚动到顶部;
                    if(_this.element.scrollTop <= 0){
                        //开始往下滑动
                        isPrev = false;
                        //准备等待
                        j = _this.waitPoint;
                    }
                }else{
                    j++;
                    //等待结束
                    if(j >= _this.coming){
                        //准备滑动
                        j = 0;
                        //判断是否滚动到底部;
                        if(_this.element.scrollTop + _this.element.clientHeight >= _this.element.scrollHeight){
                            //开始往上滑动
                            isPrev = true;return;
                        }
                    }
                    //等待……
                    if(j >= _this.waitPoint)return;
                    //设置滚动条到顶部距离
                    _this.element.scrollTop += _this.frame; 
                }
            },this.frequency);
        }
    }
  • 相关阅读:
    实时需要分析
    .NET 单元测试的艺术&单元测试之道C#版
    代码演示C#各2.0到8.0版本[FK,2.0-4.8.0]
    微软Visual Studio Code 0.8.0发布,新增多种主题
    ASP.NET 5 Beta 7 版本
    软件开发设计原则
    Immutable(不可变)集合
    使用Hystrix提高系统可用性
    微软发布 Windows Server 2016 预览版第三版,开发者要重点关注Nano Server
    Akka.NET v1.0 已发布,支持Mono
  • 原文地址:https://www.cnblogs.com/BambooLamp/p/13854827.html
Copyright © 2011-2022 走看看