废话不多说，先看一下效果：
html代码如下(需要注意修改jquery.min.js文件的路径)：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='./styles.css' />
<script src='./webcc.min.js'></script> <!-- mandatory dependency -->
<!-- add additional dependencies/third party libraries -->
<script src="./control/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
font-family: 'Siemens Sans', Hevletica, 'sans-serif';
margin: 0;
height: 100%;
}
/* 字体设置 */
#title {
width: 100%;
height: 100%;
z-index: 1;
position: center;
font-size: 21px;
color: #42daed;
line-height: 60px;
text-align: center;
}
/* 表格设置 */
#table {
width: 100%;
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
/* 表头单元格设置 */
#table thead {
width: 100%;
height: 40px;
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
}
/* 表头行属性设置 */
#table thead tr {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #003376;
}
#table tbody {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 0;
}
#table tbody tr {
width: 100%;
min-height: 50px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
background-color: #003376;
}
#table tbody td {
font-size: 20px;
color: #e2eced;
line-height: 60px;
text-align: center;
}
/* #table tbody tr td {
text-align: center;
cursor: pointer;
} */
</style>
</head>
<body>
<div id="title">
<table id="table">
<thead>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>收入(元)</th>
<th>城市</th>
<th>爱好</th>
</thead>
<tbody class="Tbody">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>收入(元)</th>
<th>城市</th>
<th>爱好</th>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var srcHtml = '';
var data = [
["张三", "男", 43, 23442, "北京", "篮球"],
["李四", "男", 34, 23323, "上海","篮球"],
["王五", "男", 43, 23234, "深圳", "足球"],
["韩梅梅", "女", 12, 32332, "长沙" ,"足球"],
["李华", "男", 43, 21123, "西安", "篮球"],
["王刚", "男", 53, 132334, "成都", "足球"],
["张伟", "男", 23, 35423, "太原", "篮球"],
["张益达", "男", 43, 534524, "广州", "足球"],
["王者", "男", 23, 325642, "杭州", "篮球"],
["李东", "男", 32, 3324443, "苏州", "足球"],
["郑磊", "男", 43, 43244, "南京", "足球"],
["黄渤", "男", 54, 242454, "青岛", "足球"]
];
$.each(data, function (i, item) {
srcHtml += '<tr>' +
'<td>' + item[0] + '</td>' +
'<td>' + item[1] + '</td>' +
'<td>' + item[2] + '</td>' +
'<td>' + item[3] + '</td>' +
'<td>' + item[4] + '</td>' +
'<td>' + item[5] + '</td>' +
'</tr>'
})
$(".Tbody").html(srcHtml);
moveTab();
})
function moveTab() {
var margintop = 0;//上边距的偏移量
var stop = false;
setInterval(function () {
if (stop == true) {
return;
}
$(".Tbody").children("tr").first().animate({ "margin-top": margintop-- }, 0, function () {
var $li = $(this);
if (!$li.is(":animated")) {//第一个tr的动画结束时
if (-margintop > $li.height()) {
$li.css("margin-top", "0").appendTo($(".Tbody"));
margintop = 0;
}
}
});
}, 40); //滚动速度
$(".Tbody").children("tr:nth-child(even)").css("background-color", "#022459")
$(".Tbody").children("tr:nth-child(odd)").css("background-color", "#01204e")
//鼠标放到快递信息(tr)上时
$(".Tbody").hover(function () {
$(this).css("cursor", "pointer");
stop = true;//停止动画
}, function () {
stop = false;//开始动画
});
}
</script>
</body>
</html>
