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