jQuery实现表格行数据滚动效果
作者：奔跑DT向日葵ら
这篇文章主要为大家详细介绍了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 });
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。