这篇文章主要为大家介绍了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实现表格行数据滚动效果内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!