jQuery實現(xiàn)表格行數(shù)據(jù)滾動效果
更新時間：2021年08月01日 11:01:57 作者：奔跑DT向日葵ら
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表格行數(shù)據(jù)滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)表格行數(shù)據(jù)滾動效果的具體代碼，供大家參考，具體內(nèi)容如下
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;
}
/* 內(nèi)容滾動 */
#font-scroll {
/* 內(nèi)容滾動可視高度 */
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
// 這個辦法只適合每行數(shù)據(jù)的高度都相同的情況
// // 每次滾動的高度（一般是一條數(shù)據(jù)的高度）
// let _contentChildHeight = box.children[0].children[0].offsetHeight
// // 滾動總高度，即內(nèi)容的總高度（所有數(shù)據(jù)的總高度）
// let _contentTotalHeight = _contentChildHeight * box.children[0].children.length
// 這種辦法適合所有情況，包括每行數(shù)據(jù)的高度都不相同的情況
// 獲取所有行元素
let all_row_el = box.children[0].children
// 行總高度
let _contentTotalHeight = 0
// 每一行數(shù)據(jù)與前面所有行高度的疊加高度
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) {
// 如果數(shù)據(jù)沒有達到一定的高度，則不會執(zhí)行滾動效果
child1.clone().insertAfter(child1)
/*啟動定時器*/
let timer = setInterval(autoScrollLine, 30)
/*單行向上滾動效果*/
function autoScrollLine() {
/*判斷滾動內(nèi)容是否已經(jīng)滾完，滾完了則滾動的值重新設(shè)置到0
否則就每隔30毫秒向上滾動1px*/
if (box.scrollTop >= _contentTotalHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++;
}
/*判斷滾動的距離剛好為一條數(shù)據(jù)的高度時停掉定時器，
隔 _time 之后重新啟動定時器即可實現(xiàn)數(shù)據(jù)滾動停留效果 */
if (_contentChildHeight.indexOf(box.scrollTop) >= 0) {
clearInterval(timer)
setTimeout(() => {
timer = setInterval(autoScrollLine, 30)
}, _time)
}
}
}
}
})(jQuery);
使用方法：
$('#font-scroll').FontScroll({ time: 1000 });
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jquery簡單實現(xiàn)帶漸顯效果的選項卡菜單代碼,可實現(xiàn)tab選項卡切換過程中帶有漸顯效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單，實際主要是利用了css的li a屬性，對于以后用css制作更絢麗的效果提高了很好的參考。2010-08-08
下面小編就為大家?guī)硪黄猨Query 常用代碼集錦(必看篇)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
基于jQuery實現(xiàn)列表循環(huán)滾動小技巧(超簡單)
只要能夠不停地把第一個item移動到末尾，其余的自會往上填補空缺，填補的過程用動畫放慢些，就能有不斷滾動的視覺效果了，這種效果基于jquery怎么實現(xiàn)呢？下面小編給大家?guī)砹薺Query列表循環(huán)滾動效果的實現(xiàn)思路代碼，一起看看吧2021-08-08
這篇文章主要介紹了jQuery中元素選擇器（element）用法,簡單通俗的說明了jQuery元素選擇器的功能、用法并結(jié)合實例形式分析了jQuery元素選擇器的相關(guān)使用技巧與注意事項,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了jquery復(fù)選框多選賦值給文本框的方法,涉及jQuery相關(guān)選擇器的使用技巧,需要的朋友可以參考下2015-01-01
Javascript jquery css 寫的簡單進度條控件
很多的時候用戶需要等待你“臃腫”的 Javascript 代碼處理完成（Web 2.0 的特色）。期間或許加入一個類似于進度條的東西讓用戶有點“安慰”。這個東西實現(xiàn)起來并不復(fù)雜，無非就是獲得總的處理條目，然后獲得一個百分比，再顯示輸出。2008-03-03
基于JQuery和CSS3實現(xiàn)仿Apple TV海報背景視覺差特效源碼分享
這是一款效果非常炫酷的jQuery和CSS3仿Apple TV海報背景視覺差特效。該視覺差特效在使用鼠標在屏幕上下左右移動的時候，海報中的各種元素以不同的速度運動，形成視覺差效果，并且還帶有一些流光特效。2015-09-09
JQuery Tips相關(guān)(1)----關(guān)于$.Ready()
學(xué)習(xí)jQuery的第一件事是：如果你想要一個事件運行在你的頁面上，你必須在$(document).ready()里調(diào)用這個事件。所有包括在$(document).ready()里面的元素或事件都將會在DOM完成加載之后立即加載，并且在頁面內(nèi)容加載之前。2014-08-08
本文主要介紹了jquery中bind(),live(),delegate(),on()綁定事件的不同點和相同點，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02