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

 更新时间:2021年08月01日 11:01:57   作者:奔跑DT向日葵ら  
这篇文章主要为大家详细介绍了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() {
        /*判断滚动内容是否已经滚完,滚完了则滚动的值重新设置到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动态添加删除select项(实现代码)

    jQuery动态添加删除select项(实现代码)

    以下是对jQuery动态添加删除select项的实现代码进行了详细的分析介绍,需要的朋友可以过来参考下
    2013-09-09
  • jQuery插件pagination实现分页特效

    jQuery插件pagination实现分页特效

    jQuery分页插件示例,ajax方式的jQuery前端分页插件,其核心代码jquery.pagination.js已随示例打包,Demo中包括了5种不同的分页效果演示,全部是Ajax无刷新方式实现分页,对于搞前端开发的朋友来说,这是个值得收藏的代码特效,为以后实现无刷新分页提供方便。
    2015-04-04
  • jQuery插件JWPlayer视频播放器用法实例分析

    jQuery插件JWPlayer视频播放器用法实例分析

    这篇文章主要介绍了jQuery插件JWPlayer视频播放器用法,结合实例形式分析了JWPlayer插件播放视频的相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • jQuery+css3实现Ajax点击后动态删除功能的方法

    jQuery+css3实现Ajax点击后动态删除功能的方法

    这篇文章主要介绍了jQuery+css3实现Ajax点击后动态删除功能的方法,可实现点击选区后出现选区收缩、滚动消失的效果,涉及jquery结合Ajax与数学运算实时操作页面元素的相关技巧,需要的朋友可以参考下
    2015-08-08
  • 使用JQuery实现Ctrl+Enter提交表单的方法

    使用JQuery实现Ctrl+Enter提交表单的方法

    这篇文章主要介绍了使用JQuery实现Ctrl+Enter提交表单的方法,需要的朋友可以参考下
    2015-10-10
  • jQuery实现的仿百度分页足迹效果代码

    jQuery实现的仿百度分页足迹效果代码

    这篇文章主要介绍了jQuery实现的仿百度分页足迹效果代码,采用jQuery针对奇偶数不同的页码设置不同的样式,非常简单实用,需要的朋友可以参考下
    2015-10-10
  • Jquery动态改变图片IMG的src地址示例

    Jquery动态改变图片IMG的src地址示例

    改变图片IMG的链接地址在某些特殊情况下实现特殊的功能还是比较不错的,下面为大家详细介绍下使用jquery改变图片IMG的链接地址,感兴趣的朋友可以参考下哈
    2013-06-06
  • 实例代码详解jquery.slides.js

    实例代码详解jquery.slides.js

    slides是一款强大的,专业的幻灯片组件,能够全方位对幻灯片的速度控制,本文通过代码实例给大家讲解jquery.slides.js,感兴趣的朋友一起学习
    2015-11-11
  • Yii-自定义删除确认弹框(zyd)jquery实现代码

    Yii-自定义删除确认弹框(zyd)jquery实现代码

    Yii-自定义删除确认弹框(zyd),简单/时尚/大方适合比较爱酷的人使用,时尚的你可不要错过了哈,希望本文知识点可以帮助到你
    2013-03-03
  • JQuery实现当鼠标停留在某区域3秒后自动执行

    JQuery实现当鼠标停留在某区域3秒后自动执行

    这篇文章主要介绍了JQuery实现当鼠标停留在某区域3秒后自动执行,可以应用于很多场景,需要的朋友可以参考下
    2014-09-09

最新评论