这篇文章主要讲解了“jQuery怎么实现表格行数据滚动效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jQuery怎么实现表格行数据滚动效果”吧！
HTML代码：
计算
安全
数据库
网络和加速
企业服务
<div class="box">
<div class="box-header">
<div class="col">测试1</div>
<div class="col">测试2</div>
<div class="col">测试3</div>
<div class="col">测试4</div>
</div>
<div id="font-scroll">
<div class="box-body">
<div class="row">
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
</div>
<div class="row">
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
</div>
<div class="row">
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
</div>
<div class="row">
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
</div>
<div class="row">
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
</div>
<div class="row">
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
</div>
<div class="row">
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
</div>
<div class="row">
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
</div>
<div class="row">
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
<div class="col">测试文字</div>
</div>
</div>
</div>
</div>CSS样式代码：
.box {
width: 400px;
text-align: center;
font-size: 14px;
border: 1px solid rgba(0, 0, 0, .3);
}
.box .box-header {
display: flex;
justify-content: space-evenly;
}
.box-body .row {
display: flex;
justify-content: space-evenly;
}
.box-header,
.box-body .row {
border-bottom: 1px dashed #404040;
}
.box .col {
padding: 10px 0 10px 0;
}
.box .col:nth-child(1) {
width: 80px;
}
.box .col:nth-child(2) {
width: 60px;
}
.box .col:nth-child(3) {
width: 80px;
}
.box .col:nth-child(4) {
width: 60px;
}
/* 内容滚动 */
#font-scroll {
/* 内容滚动可视高度 */
height: 199px;
overflow: hidden;
}JS代码：
(function ($) {
$.fn.FontScroll = function (options) {
let d = { time: 1000 }
$.extend(d, options);
// 需要滚动的div父盒子
let box = this[0]
// 滚动间隔
let _time = d.time
// 这个办法只适合每行数据的高度都相同的情况
// // 每次滚动的高度（一般是一条数据的高度）
// let _contentChildHeight = box.children[0].children[0].offsetHeight
// // 滚动总高度，即内容的总高度（所有数据的总高度）
// let _contentTotalHeight = _contentChildHeight * box.children[0].children.length
// 这种办法适合所有情况，包括每行数据的高度都不相同的情况
// 获取所有行元素
let all_row_el = box.children[0].children
// 行总高度
let _contentTotalHeight = 0
// 每一行数据与前面所有行高度的叠加高度
let _contentChildHeight = []
for (let i in all_row_el) {
if ((new RegExp("^\\d+$")).test(i)) {
_itemHeight = all_row_el[i].offsetHeight
_contentTotalHeight += _itemHeight
i == 0 ? _contentChildHeight.push(_itemHeight) : _contentChildHeight.push(_contentChildHeight[i - 1] + _itemHeight)
}
}
// 需要滚动的div子盒子
let child1 = this.children('.box-body')
// 克隆出来滚动的div子盒子
// 克隆方法一
// let child1 = this.children('.box-body')[0]
// let child2 = this.children('.box-body')[1]
// child2.innerHTML = child1.innerHTML
// 克隆方法二
if ((box.offsetHeight + 5) < _contentTotalHeight) {
// 如果数据没有达到一定的高度，则不会执行滚动效果
child1.clone().insertAfter(child1)
/*启动定时器*/
let timer = setInterval(autoScrollLine, 30)
/*单行向上滚动效果*/
function autoScrollLine() {
/*判断滚动内容是否已经滚完，滚完了则滚动的值重新设置到0
否则就每隔30毫秒向上滚动1px*/
if (box.scrollTop >= _contentTotalHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++;
}
/*判断滚动的距离刚好为一条數據的高度时停掉定时器，
隔 _time 之后重新启动定时器即可实现數據滚动停留效果 */
if (_contentChildHeight.indexOf(box.scrollTop) >= 0) {
clearInterval(timer)
setTimeout(() => {
timer = setInterval(autoScrollLine, 30)
}, _time)
}
}
}
}
})(jQuery);使用方法：
$('#font-scroll').FontScroll({ time: 1000 });效果图：
感谢各位的阅读，以上就是“jQuery怎么实现表格行数据滚动效果”的内容了，经过本文的学习后，相信大家对jQuery怎么实现表格行数据滚动效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
