Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
355 views
in Technique[技术] by (71.8m points)

js表格无缝滚动 怎么来实现的

image.png
这种带有斑马线效果的列表,怎么实现自动上下无缝隙滚动。
百度上很多效果都不太好/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

以列表向上滚动为例.
将顶部的若干行(显示几行,就clone几行.),clone到列表底部.
然后定时向上滚动.每次滚动一行的高度(这种滚动带有缓动效果).
复制行的第一行滚动到顶部的瞬间,将滚动值复原为0(去除缓动效果),从头开始.


                1
                2
                3
                4
                5
        1       6
----------------------------------------
1       2       1       1
2       3       2       2
3       4       3       3
----------------------------------------
4       5               4
5       6               5
6       1               6
1       2               1
2       3               2
3                       3

实际上就是一个单向的轮播,区别就是显示的页数比较多,但没有交互,实际上还比轮播简单


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...