jQuery怎么实现表格行数据滚动效果

这篇文章主要讲解了“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() {                if (box.scrollTop >= _contentTotalHeight) {          box.scrollTop = 0;        } else {          box.scrollTop++;        }                if (_contentChildHeight.indexOf(box.scrollTop) >= 0) {          clearInterval(timer)          setTimeout(() => {            timer = setInterval(autoScrollLine, 30)          }, _time)        }      }    }  }})(jQuery);

使用方法：

$('#font-scroll').FontScroll({ time: 1000 });

效果图：

感谢各位的阅读，以上就是“jQuery怎么实现表格行数据滚动效果”的内容了，经过本文的学习后，相信大家对jQuery怎么实现表格行数据滚动效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！