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控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
随机推荐
- Spring源码解析 | 第一篇 :IntelliJ IDEA2019.3编译Spring5.3.x源码
前言 工欲善其事必先利其器.学习和深读Spring源码一个重要的前提:编译源码到我们的本地环境.这样方便我们在本地环境添加注释.断点追踪.查看类或接口的继承关系等等,更加高效的学习Spring源码.个 ...
- apache OS 10013 问题
问题描述 (OS 10013)通常每个套接字地址 (协议/网络地址/端口) 只允许使用一次: make_sock: could not bind to address 0.0.0.0:80 解决方法 ...
- .NetCore之接口缓存
1.问题:我们平时做开发的时候肯定都有用到缓存这个功能,一般写法是在需要的业务代码里读取缓存.判断是否存在.不存在则读取数据库再设置缓存这样一个步骤.但是如果我们有很多地方业务都有用到缓存,我们就需要 ...
- Mqtt协议 服务器交互
1.服务器发送消息 package demo1; import org.eclipse.paho.client.mqttv3.MqttClient; import org.eclipse.paho.c ...
- 数据库:浅谈DML、DDL、DCL的区别
简介 SQL是一个标准的数据库语言,是面向集合的描述性非过程化语言.它功能强,效率高,简单易学易维护(迄今为止,我还没见过比它还好学的语言).然而SQL语言由于以上优点,同时也出现了这样一个问题:它是 ...
- PHP基础之面向对象篇
前言 前面写的都是运算符.流程控制.排序查找等,下面说一说面向对象的一些内容.这是前面写的,有兴趣可以去看一看. PHP入门之类型与运算符 PHP入门之流程控制 PHP入门之函数 PHP入门之数组 P ...
- docker自己部署一个项目
老祖宗的话说得好呀:实践出真知 自己打个简单的镜像运行 遇到了一堆破问题 学习docker主要在菜鸟教程 https://www.runoob.com/docker/docker-containe ...
- Anaconda使用及管理
接下来均是以命令行模式进行介绍,Windows用户请打开"Anaconda Prompt":macOS和Linux用户请打开"Terminal"("终 ...
- FTL指令常用标签及语法
FTL指令常用标签及语法注意:使用freemaker,要求所有标签必须闭合,否则会导致freemaker无法解析. freemaker注释:<#-- 注释内容 -->格式部分,不会输出 - ...
- MongoDB入门(介绍、安装、增删改查)
文章作者公众号bigsai,已收录在回车课堂,如有帮助还请不吝啬点个赞赞支持一下! 课程导学 大家好我是bigsai,我们都学过数据库,但你可能更熟悉关系(型)数据库例如MySQL,SQL SERVE ...