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

JS DIV列表自动滚动带停顿,滚动到底部后自动滚动到顶部的更多相关文章

  1. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. jQuery带控制按钮向上和向下滚动文本列表

    效果:http://hovertree.com/texiao/jquery/64/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head&g ...

  3. js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

    /** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...

  4. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  6. 常用JS图片滚动(无缝、平滑、上下左右滚动)

    常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head><-----></head><body> <!--向下滚动代码开始-->& ...

  7. vant list列表滚动到底部加载更多会滚动到顶部问题

    如果使用异步加载数据并使用了vant中的toast做加载中提示,则有可能会导致列表滚动高度为0,也就是回到了顶部.只要在list加载回调里不使用toast就可以避免这个问题.

  8. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  9. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

随机推荐

  1. 并发编程中死锁、递归锁、进程/线程池、协程TCP服务器并发等知识点

    1.死锁 定义; 类似两个人分别被囚禁在两间房子里,A手上拿着的是B囚禁房间的钥匙,而B拿着A的钥匙,两个人都没法出去,没法给对方开锁,进而造成死锁现象.具体例子代码如下: # -*-coding:u ...

  2. 方法区(Method Area)基础知识

    堆.栈.方法区堆关系 概述 方法区与堆区一样,是各个线程共享的内存区域 方法区在JVM启动时就会被创建,并且它的实际的物理内存空间中和Java堆区一样都可以是不连续的 方法区的大小,跟堆空间一样,可以 ...

  3. 爬虫日志监控 -- Elastc Stack(ELK)部署

    傻瓜式部署,只需替换IP与用户 导读: 现ELK四大组件分别为:Elasticsearch(核心).logstash(处理).filebeat(采集).kibana(可视化) 在elastic官网下载 ...

  4. linux(centos)环境下安装rabbitMq

    1.由于rabbitMq是用Erlang语言写的,因此要先安装Erlang环境 下载Erlang :http://www.rabbitmq.com/releases/erlang/erlang-19. ...

  5. 不知如何创建UML电路图?看看本文

    Visual Paradigm是包含设计共享.线框图和数据库设计新特性的企业项目设计工具.现在你只需要这样单独的一款模型软件 Visual Paradigm就可以完成用UML设计软件,用BPMN去执行 ...

  6. Mice and Rice(queue的用法)

    Mice and Rice(queue的用法) Mice and Rice is the name of a programming contest in which each programmer ...

  7. 【奇淫巧技】XSS绕过技巧

    XSS记录 1.首先是弹窗函数: alert(1) prompt(1) confirm(1)eval() 2.然后是字符的编码和浏览器的解析机制: 要讲编码绕过,首先我们要理解浏览器的解析过程,浏览器 ...

  8. LiteOS-任务篇

    目录 前言 链接 参考 笔录草稿 基本概念 任务相关概念 LiteOS 任务运作机制 内核初始化 创建任务 创建任务有两种方案 任务相关函数 任务开发流程 创建创建任务 部分源码 例子 创建任务的任务 ...

  9. Vuejs上传

    下载 Vuejs上传Vuejs上传 多部分上传Vue组件. 上传器可以选择上传多部分的文件. 这是关于最大的上传尺寸,允许你上传大文件. 如果prop multiple为真,文件列表将在选择文件时呈现 ...

  10. 《New Horizon College English》 (Third Edition) -长篇阅读(Skmming and Scanning)

    <New Horizon College English>(Third Edition) <新视野大学英语>(第三版) 长篇阅读(Skmming and Scanning) 总 ...