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

<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>

.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;    }

(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++;        }        /*判断滚动的距离刚好为一条
Vue封装通用table组件的完整步骤记录
jquery实现购物车功能