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控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
随机推荐
- springboot的文件路径,配置文件
生成springboot会指定一个包路径,启动的class文件在这个目录下,其他的controller等也要在这个目录的子目录下,不然会扫不到. 一般我们会维护两三个配置文件:生产环境,开发环境,测试 ...
- 【漏洞复现篇】CVE-2020-1472-微软NetLogon权限提升-手把手教学-简单域环境搭建与Exp执行
一.漏洞简介 NetLogon 远程协议是一种在 Windows 域控上使用的 RPC 接口,被用于各种与用户和机器认证相关的任务.最常用于让用户使用 NTLM 协议登录服务器,也用于 NTP 响应认
- k8s&docker面试总结
花了大半个月对k8s&docker进行了梳理,包括之前读过的书,官方文档以及k&d在公司项目的实践等. 以下是个人对docker & k8s 面试知识点的总结: 1 docke ...
- Java Web学习(八)RESTful设计
一.RESTful设计风格 REST :指的是一组架构约束条件和原则. RESTful :满足这些约束条件和原则的应用程序或设计就是 . REST 原则 客户端和服务器之间的交互在请求之间是无状态的. ...
- 刷题[BJDCTF 2nd]简单注入
解题思路 打开发现登陆框,随机输入一些,发现有waf,然后回显都是同样的字符串.fuzz一波,发现禁了挺多东西的. select union 等 这里猜测是布尔盲注,错误的话显示的是:You konw ...
- Apollo系列(一):分布式配置中心Apollo安装(Linux、Docker)
一.介绍 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理 ...
- Spring Boot(二) :Redis 使用
Redis 介绍 Redis 是目前业界使用最广泛的内存数据存储.相比 Memcached,Redis 支持更丰富的数据结构,例如 hashes, lists, sets 等,同时支持数据持久化.除此 ...
- Python正则表达式 re.sub()函数:标志位flags与参数个数问题
这两天在写爬虫程序,涉及英文文本处理,需要规范化英文标点符号的写法.正常情况下,英文句号「.」后面需要保证有且只有一个空格,但也有例外情况,比如「i.e.」.「e.g.」.「P.S.」这种.由于无法预 ...
- python基础知识 变量 数据类型 if判断
cpu 内存 硬盘 操作系统 cpu:计算机的运算和计算中心,相当于人类的大脑 飞机 内存:暂时存储一些数据,临时加载数据和应用程序 4G 8G 16G 32G 速度快,高铁 断电即消失 造价高 硬盘 ...
- 解决Dubbo无法发布被事务代理的Service问题
在HelloServiceImpl类上加入@Transactional注解后,虽然工程可以正常跑起来,但是通过dubbo管理控制台可以看到里面并没有服务发布上来. 此时启动服务提供者和服务消费者,并访 ...