html列表自动无限循环滚动,js 无限循环垂直滚动列表
1 需求
效果就是下面这样,就是一次滚出一个元素,无限循环,可以使用死数据,也可以追加,当然具体动画你可以修改代码。
效果
思路
使用css做过渡动画,用js控制滚动(其实也可以只用css)。
* {
padding: 0;
margin: 0;
list-style: none;
}
#ul {
position: relative;
top: 0px;
left: 0px;
}
li {
width: 200px;
height: 100px;
margin: 10px;
background-color: #f00;
color: #fff;
text-align: center;
font-size: 60px;
transition: all 0.3s ease-out;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
html结构的大概意思就是,最外层的div限制可视区域,使用js移动ul达到滚动的效果
主要的代码如下
const ul = document.getElementById('ul')
const firstLi = document.querySelector('#ul li:first-child')
setInterval(() => {
const firstLi = document.querySelector('#ul li:first-child')
ul.style.transition = 'all 0.5s ease-out'
firstLi.style.opacity = 0
ul.style.top = -110 + 'px'
setTimeout(() => {
firstLi.removeAttribute('style')
ul.appendChild(firstLi)
ul.style.transition = ''
ul.style.top = 0
}, 500)
}, 2000)
这里有几个地方要注意
首先每两秒滚动一次,每次滚动的距离-110px,这个距离就是每个li加上它margin。
在ul滚动完成后我们需要移除第一个li,把它加入到ul的最后,但是这里会有一个问题,如果在ul.style.top = -110 + 'px'之后直接ul.appendChild(firstLi),会导致第一个元素消失后,第二个元素就会顶上去,实际在页面上看到的不是预期的第二个元素而是第三个元素。所以这里在移除第一个元素之后,马上将ul的位置重置为0
可以看到在append的时候我使用了一个500毫秒的定时器,这里是因为我的过渡动画用的是css,没办法知道他什么时候结束(除非使用animation可以事件监听),所以使用了一个大于之前设定的过渡动画时间的定时器,在动画完成后再移除第一个元素
3. 总体代码如下
Document
* {
padding: 0;
margin: 0;
list-style: none;
}
#ul {
position: relative;
top: 0px;
left: 0px;
}
li {
width: 200px;
height: 100px;
margin: 10px;
background-color: #f00;
color: #fff;
text-align: center;
font-size: 60px;
transition: all 0.3s ease-out;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
走起来
复位
const ul = document.getElementById('ul')
const start = document.getElementById('start')
const reset = document.getElementById('reset')
let timerId
start.onclick = () => {
if(timerId) return
timerId = setInterval(() => {
const firstLi = document.querySelector('#ul li:first-child')
ul.style.transition = 'all 0.5s ease-out'
firstLi.style.opacity = 0
ul.style.top = -110 + 'px'
setTimeout(() => {
firstLi.removeAttribute('style')
// 模拟随机添加数据
// const count = Math.random() * 10
// for(let i = count; i >0; i--) {
// ul.appendChild(firstLi.cloneNode(true))
// }
ul.appendChild(firstLi)
ul.style.transition = ''
ul.style.top = 0
}, 500)
}, 2000)
}
reset.onclick = () => {
clearInterval(timerId)
timerId = undefined
location.reload()
}
html列表自动无限循环滚动,js 无限循环垂直滚动列表相关推荐
- html页面加文字横向滚动,js实现文字横向滚动
页面布局 恭喜793765***获得 50元巨人点卡奖励 恭喜793765***获得 50元巨人点卡奖励 恭喜793765***获得 50元巨人点卡奖励 恭喜793765***获得 50元巨人点卡奖励 ...
- php 页面图片无缝滚动,js实现图片无缝滚动
实现原理: 图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接. 前提:1.必须是没有设置 ...
- ajax如何循环lis,关于js中循环遍历中顺序执行多个嵌套ajax的问题
就是业务上需要完成一个功能,这个功能需要依次调用四个接口,后面接口的参数都依赖于前一个接口的返回值. 类似这样: var objArr = "从其他逻辑获得"; for(var n ...
- Android实现文字垂直滚动
文字垂直滚动 [功能] 在以前的文章曾经写过 如何水平滚动 现在说一下垂直滚动 [原理] 1. 设置 ScrollView的控件高度 为定值 2. 如何滚动显示:ScrollView.smoothSc ...
- 微信小程序 - 新闻动态 / 公告上下滚动列表(上下循环滚动,无限上下自动滚动列表)
前言 本文实现了 无限上下自动滚动列表 组件,常见于新闻动态列表.公告等场景,可直接调用. 您可以自定义滚动间隔与显示多少个列表, 另外点击每项会触发事件,可用于跳转到详情页. 代码干净整洁,注释详细 ...
- JS无限滚动、回到顶端和图片懒加载
目录 前言 1 无限滚动(垂直) 1.1 效果和代码 1.2 过程解释 1.2.1 监听页面滚动 1.2.2 获取距页面底部的距离 2 回到顶端 2.1 效果和代码 2.2 过程解释 3 图片懒加载 ...
- html js 无限循环,JavaScript For 循环
JavaScript For 循环 循环在编程中用于自动执行重复性任务. 例如,假设我们要打印" Hello World" 10次.可以如下所示进行:document.write( ...
- JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)
概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...
- 【转】超酷的 mip-infinitescroll 无限滚动(无限下拉)
写在前面 无限滚动技术(又叫做无限下拉技术)被广泛应用于新闻类,图片预览类网站.对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长.技术上原理也很简单,在页面加载时加载一 ...
- 超酷的 mip-infinitescroll 无限滚动(无限下拉)
写在前面 无限滚动(又叫做无限下拉)技术被广泛应用于新闻类,图片预览类网站.对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长.技术上原理也很简单,在页面加载时加载一部分 ...
最新文章
- pandas使用bdate_range函数获取起始时间(start)和结束时间(end)范围内的所有工作日日期(business day)
- 常考的 21 条 Linux 命令
- 深度学习- Dropout 稀疏化原理解析
- linux 系统盘无法ls,系统故障排除
- MongoTemplate 关于 insert 和 save 函数的区别
- 【Flutter】基础组件【09】Button
- springboot集成fastDFS文件上传下载
- malloc 初始化_C++核心准则NR.5:不要使用两阶段初始化
- 带你轻轻松松了解route-map
- Kafka集群搭建配置
- 旅行,写作,编程 :IT文艺青年的生活态度
- 2023最新素材解析网站源码搭建和原理,附带PHP小例子。
- python检测多重共线性程序_用 VIF 方法消除多维数据中的多重共线性
- 苹果X可以升级5G吗_苹果分析师:2020 年的 iPhone 屏幕尺寸升级,还有 5G
- 中职双师型教师计算机培训总结,双师型教师计算机培训心得体会.doc
- 开发以及团队管理方面的心得总结
- unity生成 html5,导出到html5时发生unity项目错误
- 席位预定中,第二届世界物联网安全峰会5.30-5.31
- 蚂蚁集团两地上市暂缓,阿里巴巴股价大跌,员工快到手的大 House 飞了!
- 华为机考——LISP 加减乘除语句解析并计算结果
热门文章
- 欢度世界杯——倒时差
- 千锋web前端教学知识点记录及个人理解2
- Spring(26)——PathMatchingResourcePatternResolver
- 算法工程师的能力素质模型
- Java工程师胜任力素质模型,胜任力故事汇编C47│AspiringMinds:高潜力程序员的胜任力素质模型...
- 有物不知其数,三三数之剩二,五五数之剩三,七七数之剩二。问物几何?
- adobe photoshop cs6 安装
- Matlab窄带信号的测向算法
- 普渡大学计算机科学本科,美国普渡大学计算机科学CS本科申请条件及案例
- 计算机网络和internet选项,详细教你电脑ie的internet选项在哪