<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.message{ font-size:12px;color: red; border-bottom: 1px dashed #CCCCCC; margin-bottom: 5px;;}
table {
border-collapse: collapse;
border-spacing: 0px;
border: none;
width: 600px;
}
td {
border: 1px solid #CCCCCC;
}
.title {
background-color: #EAEAEA;
color: #333333;
}
.rollDiv {
padding: 1px;
overflow: hidden;
height: 100px;
}
.rollDiv table td {
font-size: 12px;
border: none;
}
</style>
<script src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function() {
$(".rollContent").css("margin-top","0px");///很重要，IE9以下的没有此行代码无法正常运行
var count1=0;
$(".rollDiv").height($(".rollContent").height());
var rollCount = 0;
var content = $(".rollContent").html();
$(".rollContent").append(content);
setInterval(function() {
++rollCount;
if ($(".rollContent").children().first().height() == rollCount) {
$(".rollContent").append(content);
$(".rollContent").children().first().remove();
$(".rollContent").css({
"margin-top": "+=" + rollCount
});
rollCount = 0;
}
$(".rollContent").css({
"margin-top": "-=" + 1
});
}, 100);
});
</script>
</head>
<body>
<div class="message">内容循环滚动的表格</div>
<div>
<table>
<tr class="title">
<td>姓名</td>
<td>姓名</td>
<td>姓名</td>
<td>姓名</td>
<td>姓名</td>
<td>姓名</td>
</tr>
<tr>
<td colspan="6">
<div class="rollDiv">
<div class="rollContent">
<table>
<tr>
<td>姓名1</td>
<td>姓名1</td>
<td>姓名1</td>
<td>姓名1</td>
<td>姓名1</td>
<td>姓名1</td>
</tr>
<tr>
<td>姓名2</td>
<td>姓名2</td>
<td>姓名2</td>
<td>姓名2</td>
<td>姓名2</td>
<td>姓名2</td>
</tr>
<tr>
<td>姓名3</td>
<td>姓名3</td>
<td>姓名3</td>
<td>姓名3</td>
<td>姓名3</td>
<td>姓名3</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名5</td>
<td>姓名5</td>
<td>姓名7</td>
<td>姓名8</td>
<td>姓名4</td>
<td>姓名43</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>