文章编号：279 / 更新时间：2024-12-26 22:05:53 / 浏览：次

利用html+css+javascript实现表格内容向上自动滚动轮播，下面小编给大家介绍一下具体实现代码！

姓名	城市	数量
王小米	哈尔滨	100
王小米	哈尔滨	100
王小米	哈尔滨	100
王小米	哈尔滨	100
王小米	哈尔滨	100
王小米	哈尔滨	100
王小米	哈尔滨	100
王小米	哈尔滨	100
王小米	哈尔滨	100
王小米	哈尔滨	100
王小米	哈尔滨	100
王小米	哈尔滨	100
王小米	哈尔滨	100

css代码：

* { margin:0px; padding:0px;}.table-tbody td { width:180px; text-align:center;}table tr { height:40px;}#box { height:200px; width:720px; overflow:hidden;}.table-thead { position:sticky; top:0; background-color:#eee;}

javascript代码：

window.onload = function() { var box = document.getElementById("box"); var table = document.getElementById("table"); box.scrollTop = 0; var timer = null; timer = setInterval(function() { box.scrollTop++; if (box.scrollTop > box.offsetHeight) { box.scrollTop = 0; } }, 30); box.onmouseover = function() { clearInterval(timer) } box.onmouseout = function() { timer = setInterval(function() { box.scrollTop++; if (box.scrollTop > box.offsetHeight) { box.scrollTop = 0; } }, 30) };}

上面是“”的全面内容，想了解更多关于 内容，请继续关注web建站教程。

本文地址：article/44452ef3abae52f78a76.html

上一篇：推荐一个可以免费获取域名SSL证书泛域名证...
下一篇：推荐一款免费开源的JavaScript读取显示PDF...