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控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
随机推荐
- CentOS6.10下安装MongoDB和Redis
安装mongodb 首先考虑离线安装,但是安装过程中在启动服务的时候出现了问题,centOS出于稳定原因考虑,系统自带的glibc版本过低, 而编译需要使用较高版本,这个问题我查询了一下,需要升级gl ...
- SpringMVC-11-文件上传和下载
11. 文件上传和下载 准备工作 springMVC可以很好的支持文件上传,但是SpringMVC上下文默认没有装配MultipartResolver,因此默认情况下不能处理文件上传工作.如果想实 ...
- 尚硅谷阳哥JVM笔记
JVM体系结构 类加载器(快递员): 只负责加载java文件,编译后的class文件在文件开头有特定的文件表示,将class文件字节码内容从硬盘加载到JVM内存中并将这些内容转换成方法区的运行时数据结 ...
- 从Class源码看反射
日常敲码中,如果想要在程序运行阶段访问某个类的所有信息,并支持修改类的状态或者行为的话,肯定会用到反射,而反射靠的就是Class类.Java的动态代理也用到了这个东西,所以了解其基本操作在苦逼的CRU ...
- 单调队列优化O(N)建BST P1377 [TJOI2011]树的序
洛谷 P1377 [TJOI2011]树的序 (单调队列优化建BST 链接 题意分析 本题思路很简单,根据题意,我们利用所给的Bst生成序将Bst建立起来,然后输出该BST的先序遍历即可: 但,如果我 ...
- 工具请求接口参数为string类型的JSON字符串时需要加转义字符模拟测试
例如postMan传String类型的json字符串请后台接口时,需要\转义
- Hbuilder给手机发送短信与拨打电话
前言:业务场景 需要给手机号码拨打电话与发送短信.html5已经提供接口. methods: { Call: function() { var that = this; if(that.ptel == ...
- 小白也能看懂的Redis教学基础篇——朋友面试被Skiplist跳跃表拦住了
各位看官大大们,双节快乐 !!! 这是本系列博客的第二篇,主要讲的是Redis基础数据结构中ZSet(有序集合)底层实现之一的Skiplist跳跃表. 不知道那些是Redis基础数据结构的看官们,可以 ...
- 为 MaixPy 加入软 I2C 接口(移植 MicroPython 的 I2C)
起因 本文的重心为讲解如何为一款芯片移植和实现 micropython 的通用组件,但会顺带解释不同芯片的工作方式和特性. 国际惯例,先有起因,再谈问题的解决,所以记得上次总结的 关于 K210 Ma ...
- 更改MySQL 5.7的数据库的存储位置
操作系统:Windows 10 x64 MySQL安装包版本:mysql-installer-community-5.7.17.0 参考:MySQL 5.7版本的安装使用详细教程+更改数据库data的 ...