jquery无缝滚动代码

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

本文实例为大家分享了jQuery实现表格行数据滚动效果的具体代码,供大家参考,具体内容如下

HTML代码:

  • <li class="box">
      <li class="box-header">
        <li class="col">测试1</li>
        <li class="col">测试2</li>
        <li class="col">测试3</li>
        <li class="col">测试4</li>
      </li>
      <li id="font-scroll">
        <li class="box-body">
          <li class="row">
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
          </li>
          <li class="row">
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
          </li>
          <li class="row">
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
          </li>
          <li class="row">
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
          </li>
          <li class="row">
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
          </li>
          <li class="row">
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
          </li>
          <li class="row">
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
          </li>
          <li class="row">
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
          </li>
          <li class="row">
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
            <li class="col">测试文字</li>
          </li>
        </li>
      </li>
    </li>
    
  • 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);
    
        // 需要滚动的li父盒子
        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)
          }
        }
    
        // 需要滚动的li子盒子
        let child1 = this.children('.box-body')
        // 克隆出来滚动的li子盒子
        // 克隆方法一
        // 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++;
            }
            /*判断滚动的距离刚好为一条數據的高度时停掉定时器,
            隔 _time 之后重新启动定时器即可实现數據滚动停留效果 */
            if (_contentChildHeight.indexOf(box.scrollTop) >= 0) {
              clearInterval(timer)
              setTimeout(() => {
                timer = setInterval(autoScrollLine, 30)
              }, _time)
            }
          }
        }
      }
    })(jQuery);
    
  • 使用方法:

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

    jquery无缝滚动代码(jQuery实现表格行数据滚动效果)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签: