使用以下代码直接实现
1 | 1 | 1 |
1 | 1 | 1 |
2 | 2 | 2 |
3 | 3 | 3 |
3 | 3 | 3 |
1 | 1 | 1 |
4 | 4 | 4 |
5 | 5 | 5 |
6 | 6 | 6 |
//在table表格外加两个div
<div id="demo" style="overflow: hidden; height: 200px;">
<div id="demo1">
<table>
<tbody>
//表格内容
</tbody>
</table>
</div>
<div id="demo2"></div>
</div>
JS代码
<script type="text/javascript">
var speed = 50;
demo2.innerHTML = demo1.innerHTML;
function Marquee() {
if (demo2.offsetTop - demo.scrollTop <= 0) {
demo.scrollTop -= demo1.offsetHeight;
} else {
demo.scrollTop++;
if (demo.scrollTop == 250)
demo.scrollTop = 0;
}
}
var MyMar = setInterval(Marquee, speed);
demo.onmouseover = function() {
clearInterval(MyMar);
}
demo.onmouseout = function() {
MyMar = setInterval(Marquee, speed);
}
</script>
以上代码就可以实现表格自动无限滚动翻页。