这篇文章给大家分享的是用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() {
        /*判断滚动内容是否已经滚完，滚完了则滚动的值重新设置到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有帮助，想要了解更多jQuery实现数据滚动的内容，大家可以关注群英网络其它相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 一文带你了解ECharts鼠标事件的处理

  这篇文章给大家介绍一下ECharts鼠标事件的处理方法，事件是用户或浏览器自身执行的某种动作，如click、mouseover、页面加载完毕后触发load事件，都属于事件。为了记录用户的操作和行为路径，需要完成鼠标事件处理和组件交互的行为事件的处理。

• 深度解读如何使用requestAnimationFrame 高效精准地重绘平滑的动画

  这篇文章主要为大家介绍了requestAnimationFrame定时动画屏幕刷新率节流示例浅析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• jQuery怎样实现控制按钮禁用的功能？

  jQuery怎样实现控制按钮禁用的功能？控制按钮禁用的功能我们常在一些登录注册页面会使用到，例如发送登录验证码时，点击发送验证码之后，按钮被暂时禁用，5秒之后再取消禁用。下面我们就来看看这一需求怎样实现。

• JS中Sunmao的工作原理是什么，如何使用呢

  目录引言设计原则1. 明确不同角色的职责2. 发挥代码的威力，而不是限制3. 各个层面的可扩展性4. 专注而不是发散Sunmao 的工作原理响应最新的状态组件间交互布局与样式类型安全在组件间复用代码可扩展的可视化编辑器保持开放引言尽管现在越来越多的人开始对低代码开发感兴趣，但已有低代码方案的一些局限性仍然让大家有所保留

• JS的宏任务和微任务是什么，队列是怎样的

  目录前言宏任务宏任务队列微任务微任务队列Event-Loop执行顺序结语前言首先我们要了解javascript是一个单线程的脚本语言，也就是说我们在执行代码的过程中不会出现同时进行两个进程（执行两段代码）。Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）