jQuery怎么實(shí)現(xiàn)表格行數(shù)據(jù)滾動(dòng)效果

這篇文章主要講解了“jQuery怎么實(shí)現(xiàn)表格行數(shù)據(jù)滾動(dòng)效果”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“jQuery怎么實(shí)現(xiàn)表格行數(shù)據(jù)滾動(dòng)效果”吧！

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')
    // 克隆出來滾動(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ù)沒有達(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 });

效果圖：

感謝各位的閱讀，以上就是“jQuery怎么實(shí)現(xiàn)表格行數(shù)據(jù)滾動(dòng)效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)jQuery怎么實(shí)現(xiàn)表格行數(shù)據(jù)滾動(dòng)效果這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！