需求背景
在一些大屏首页展示上，通常会有一些表格展示，由于大屏的特殊性，不会有人专门去操作这个页面查看相应数据，一般都会采用动态滚动的效果。下面是具体的实现。
效果图
实现思路
- 通过
<ul>和<li>标签模拟表格的表头、表身； - 给最开始显示的几行数据设置样式，主要是设置其
{top: }属性值； - 通过
setInterval方法动态改变要显示行的top属性值; - 判断是否已到最后一行，若是，则再次循环。
示例代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格动态滚动效果</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="scroll-table">
<ul class="scroll-table-head">
<li>学号</li>
<li>姓名</li>
<li>成绩</li>
</ul>
<div class="scroll-table-body">
<div class="scroll-table-body-inner">
<ul class="scroll-table-body-row-1">
<li>
<div>1</div>
</li>
<li>大牛</li>
<li><span>50</span></li>
</ul>
<ul class="scroll-table-body-row-2">
<li>
<div>2</div>
</li>
<li>二狗</li>
<li><span>90</span></li>
</ul>
<ul class="scroll-table-body-row-3">
<li>
<div>3</div>
</li>
<li>三毛</li>
<li><span>78</span></li>
</ul>
<ul>
<li>
<div>4</div>
</li>
<li>四角</li>
<li><span>89</span></li>
</ul>
<ul>
<li>
<div>5</div>
</li>
<li>五娃</li>
<li><span>76</span></li>
</ul>
<ul>
<li>
<div>6</div>
</li>
<li>六孩</li>
<li><span>100</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
index.js
/*列表滚动*/
$(function(){
var scrollIndex = 0;
var scrollIndex1 = 1;
var scrollIndex2 = 2;
var scrollIndex3 = 3;
var scrolltimer = null;
var scrollimgs = $(".scroll-table-body-inner>ul");
var scrolltime = 1500;
var scrollplayNum = scrollimgs.length - 1;
function moveTop() {
scrollimgs.eq(scrollIndex).stop(true).animate({top: '-33%'},function(){
$(this).css({top:"100%"});
});
scrollimgs.eq(scrollIndex1).stop(true).animate({top: 0});
scrollimgs.eq(scrollIndex2).stop(true).animate({top: '33%'});
scrollimgs.eq(scrollIndex3).stop(true).animate({top: '66%'});
scrollimgs.removeClass();
}
function autoPlay() {
if(scrollIndex > scrollplayNum) {
scrollIndex = 0;
}
if(scrollIndex1 > scrollplayNum) {
scrollIndex1 = 0;
}
if(scrollIndex2 > scrollplayNum) {
scrollIndex2 = 0;
}
if(scrollIndex3 > scrollplayNum) {
scrollIndex3 = 0;
}
moveTop();
scrollIndex++;
scrollIndex1++;
scrollIndex2++;
scrollIndex3++;
}
scrolltimer = setInterval(autoPlay,scrolltime);
$(".scroll-table-body").mouseenter(function () {
clearInterval(scrolltimer);
}).mouseleave(function () {
scrolltimer = setInterval(autoPlay,scrolltime);
});
});
style.css
body,ol,ul{margin:0;padding:0;font-weight: normal;}
*{box-sizing: border-box;}
html,body{
height: 100%;
width: 100%;
position: relative;
overflow: auto;
background: #0C192C;
}
ul>li{
list-style: none;
}
.scroll-table{
width: 382px;
margin: 17px auto 25px auto;
height: 216px;
}
.scroll-table-head{
height: 44px;
border: 1px solid rgba(74,137,219,0.36);
width: 100%;
font-size: 16px;
color: #D1E7FF;
font-weight: bold;
}
.scroll-table-head>li{
float: left;
border-right: 1px solid rgba(74,137,219,0.36);
text-align: center;
height: 100%;
line-height: 42px;
}
.scroll-table-head>li:first-child{
width: 104px;
}
.scroll-table-head>li:nth-child(2){
width: 165px;
}
.scroll-table-head>li:last-child{
width: calc(100% - 269px);
border: 0;
}
.scroll-table-body{
height: calc(100% - 44px);
width: 100%;
border: 1px solid rgba(74,137,219,0.36);
border-top: 0;
overflow: hidden;
}
.scroll-table-body-inner{
position: relative;
height: 100%;
width: 100%;
}
.scroll-table-body-inner>ul:nth-child(odd){
background: rgba(255,255,255,0.08);
}
.scroll-table-body-inner>ul{
height: 33%;
line-height: 48px;
border-bottom: 1px solid rgba(74,137,219,0.36);
overflow: hidden;
position: absolute;
left: 0;
width: 100%;
top: 100%;
}
.scroll-table-body-inner>ul>li{
font-size: 16px;
color: #FFFFFF;
height: 100%;
float: left;
text-align: center;
}
.scroll-table-body-inner>ul>li:first-child{
width: 103px;
}
.scroll-table-body-inner>ul>li:nth-child(2){
width: 166px;
}
.scroll-table-body-inner>ul>li:last-child{
width: calc(100% - 269px);
}
.scroll-table-body-inner>ul.scroll-table-body-row-1{
top: 0;
}
.scroll-table-body-inner>ul.scroll-table-body-row-2{
top: 33%;
}
.scroll-table-body-inner>ul.scroll-table-body-row-3{
top: 66%;
}
源码地址：