爱站程序员基地本文实例为大家分享了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 += _itemHeighti == 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原生态实现表格header头随滚动条滚动而滚动
- asp.net+jquery滚动滚动条加载数据的下拉控件
- jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
- 基于jquery实现页面滚动到底自动加载数据的功能
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
- jquery滚动加载数据的方法
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- Jquery公告滚动+AJAX后台得到数据
- 拉动滚动条加载数据的jquery代码
