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;
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列表自动滚动带停顿,滚动到底部后自动滚动到顶部的更多相关文章
- 带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- jQuery带控制按钮向上和向下滚动文本列表
效果:http://hovertree.com/texiao/jquery/64/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head&g ...
- js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏
/** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...
- jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...
- 常用JS图片滚动(无缝、平滑、上下左右滚动)
常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head><-----></head><body> <!--向下滚动代码开始-->& ...
- vant list列表滚动到底部加载更多会滚动到顶部问题
如果使用异步加载数据并使用了vant中的toast做加载中提示,则有可能会导致列表滚动高度为0,也就是回到了顶部.只要在list加载回调里不使用toast就可以避免这个问题.
- marquee实现文字移动效果;js+div实现文字无缝移动效果
1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
随机推荐
- ams入门了解
另一篇介绍文 https://www.cnblogs.com/clds/p/4985893.html 转载自https://www.cnblogs.com/onlysun/p/4533798.htm ...
- php第四天-字符串
0x01 字符串 1.1 字符串的处理方式 在不同的语言中,字符串的处理方式不同:在C中字符串是作为字节数组处理的:在Java中字符串是作为对象处理的:而在php中则把字符串作为基本数据类型来处理. ...
- kafka学习(三)kafka生产者,消费者详解
文章更新时间:2020/06/14 一.生产者 当我们发送消息之前,先问几个问题:每条消息都是很关键且不能容忍丢失么?偶尔重复消息可以么?我们关注的是消息延迟还是写入消息的吞吐量? 举个例子,有一个信 ...
- http(Hyper Text Transfer Protocol)
一.定义 http(Hyper Text Transfer Protocol):超文本传输协议二.作用 数据传输三.概念 HTTP消息: 1.客户端发向服务器的请求消息 ...
- 线上Redis高并发性能调优实践
项目背景 最近,做一个按优先级和时间先后排队的需求.用 Redis 的 sorted set 做排队队列. 主要使用的 Redis 命令有, zadd, zcount, zscore, zrange ...
- 【记】《.net之美》之读书笔记(一) C#语言基础
前言 工作之中,我们习惯了碰到任务就直接去实现其业务逻辑,但是C#真正的一些基础知识,在我们久而久之不去了解巩固的情况下,就会忽视掉.我深知自己正一步步走向只知用法却不知原理的深渊,所以工作之余,一直 ...
- (转载)什么是B+树?
本文转载自网络. 如有侵权,请联系处理!
- spark-2-RDD
RDD提供了一个抽象的数据架构,我们不必担心底层数据的分布式特性,只需将具体的应用逻辑表达为一系列转换处理,不同RDD之间的转换操作形成依赖关系,可以实现管道化,从而避免了中间结果的存储,大大降低了数 ...
- 手把手教你AspNetCore WebApi:Serilog(日志)
前言 小明目前已经把"待办事项"功能实现了,API文档也搞定了,但是马老板说过,绝对不能让没有任何监控的项目上线的. Serilog是什么? 在.NET使用日志框架第一时间会想到N ...
- Xnip Mac上方便好用的截图工具
Xnip Mac上方便好用的截图工具 标注 Xnip 拥有齐全的标注功能,您可以对截取的图片进行标注,在标注的同时还能重新调整截图大小. 查看标注操作 GIF 滚动截图 Xnip 的滚动截图功能可以让 ...