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 });
效果圖:
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。