• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
123456881 显示全部楼层 发表于 2021-8-14 13:48:29 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了jQuery实现表格行数据滚动效果的具体代码,供各人参考,具体内容如下
HTML代码:
  1. <div class="box">
  2.   <div class="box-header">
  3.     <div class="col">测试1</div>
  4.     <div class="col">测试2</div>
  5.     <div class="col">测试3</div>
  6.     <div class="col">测试4</div>
  7.   </div>
  8.   <div id="font-scroll">
  9.     <div class="box-body">
  10.       <div class="row">
  11.         <div class="col">测试文字</div>
  12.         <div class="col">测试文字</div>
  13.         <div class="col">测试文字</div>
  14.         <div class="col">测试文字</div>
  15.       </div>
  16.       <div class="row">
  17.         <div class="col">测试文字</div>
  18.         <div class="col">测试文字</div>
  19.         <div class="col">测试文字</div>
  20.         <div class="col">测试文字</div>
  21.       </div>
  22.       <div class="row">
  23.         <div class="col">测试文字</div>
  24.         <div class="col">测试文字</div>
  25.         <div class="col">测试文字</div>
  26.         <div class="col">测试文字</div>
  27.       </div>
  28.       <div class="row">
  29.         <div class="col">测试文字</div>
  30.         <div class="col">测试文字</div>
  31.         <div class="col">测试文字</div>
  32.         <div class="col">测试文字</div>
  33.       </div>
  34.       <div class="row">
  35.         <div class="col">测试文字</div>
  36.         <div class="col">测试文字</div>
  37.         <div class="col">测试文字</div>
  38.         <div class="col">测试文字</div>
  39.       </div>
  40.       <div class="row">
  41.         <div class="col">测试文字</div>
  42.         <div class="col">测试文字</div>
  43.         <div class="col">测试文字</div>
  44.         <div class="col">测试文字</div>
  45.       </div>
  46.       <div class="row">
  47.         <div class="col">测试文字</div>
  48.         <div class="col">测试文字</div>
  49.         <div class="col">测试文字</div>
  50.         <div class="col">测试文字</div>
  51.       </div>
  52.       <div class="row">
  53.         <div class="col">测试文字</div>
  54.         <div class="col">测试文字</div>
  55.         <div class="col">测试文字</div>
  56.         <div class="col">测试文字</div>
  57.       </div>
  58.       <div class="row">
  59.         <div class="col">测试文字</div>
  60.         <div class="col">测试文字</div>
  61.         <div class="col">测试文字</div>
  62.         <div class="col">测试文字</div>
  63.       </div>
  64.     </div>
  65.   </div>
  66. </div>
复制代码
CSS样式代码:
  1. .box {
  2.       width: 400px;
  3.       text-align: center;
  4.       font-size: 14px;
  5.       border: 1px solid rgba(0, 0, 0, .3);
  6.     }
  7.     .box .box-header {
  8.       display: flex;
  9.       justify-content: space-evenly;
  10.     }
  11.     .box-body .row {
  12.       display: flex;
  13.       justify-content: space-evenly;
  14.     }
  15.     .box-header,
  16.     .box-body .row {
  17.       border-bottom: 1px dashed #404040;
  18.     }
  19.     .box .col {
  20.       padding: 10px 0 10px 0;
  21.     }
  22.     .box .col:nth-child(1) {
  23.       width: 80px;
  24.     }
  25.     .box .col:nth-child(2) {
  26.       width: 60px;
  27.     }
  28.     .box .col:nth-child(3) {
  29.       width: 80px;
  30.     }
  31.     .box .col:nth-child(4) {
  32.       width: 60px;
  33.     }
  34.     /* 内容滚动 */
  35.     #font-scroll {
  36.       /* 内容滚动可视高度 */
  37.       height: 199px;
  38.       overflow: hidden;
  39.     }
复制代码
JS代码:
  1. (function ($) {
  2.   $.fn.FontScroll = function (options) {
  3.     let d = { time: 1000 }
  4.     $.extend(d, options);
  5.     // 需要滚动的div父盒子
  6.     let box = this[0]
  7.     // 滚动间隔
  8.     let _time = d.time
  9.     // 这个办法只适合每行数据的高度都相同的情况
  10.     // // 每次滚动的高度(一般是一条数据的高度)
  11.     // let _contentChildHeight = box.children[0].children[0].offsetHeight
  12.     // // 滚动总高度,即内容的总高度(所有数据的总高度)
  13.     // let _contentTotalHeight = _contentChildHeight * box.children[0].children.length
  14.     // 这种办法适合所有情况,包括每行数据的高度都不相同的情况
  15.     // 获取所有行元素
  16.     let all_row_el = box.children[0].children
  17.     // 行总高度
  18.     let _contentTotalHeight = 0
  19.     // 每一行数据与前面所有行高度的叠加高度
  20.     let _contentChildHeight = []
  21.     for (let i in all_row_el) {
  22.       if ((new RegExp("^\\d+$")).test(i)) {
  23.         _itemHeight = all_row_el[i].offsetHeight
  24.         _contentTotalHeight += _itemHeight
  25.         i == 0 ? _contentChildHeight.push(_itemHeight) : _contentChildHeight.push(_contentChildHeight[i - 1] + _itemHeight)
  26.       }
  27.     }
  28.     // 需要滚动的div子盒子
  29.     let child1 = this.children('.box-body')
  30.     // 克隆出来滚动的div子盒子
  31.     // 克隆方法一
  32.     // let child1 = this.children('.box-body')[0]
  33.     // let child2 = this.children('.box-body')[1]
  34.     // child2.innerHTML = child1.innerHTML
  35.     // 克隆方法二
  36.     if ((box.offsetHeight + 5) < _contentTotalHeight) {
  37.       // 如果数据没有达到一定的高度,则不会执行滚动效果
  38.       child1.clone().insertAfter(child1)
  39.       /*启动定时器*/
  40.       let timer = setInterval(autoScrollLine, 30)
  41.       /*单行向上滚动效果*/
  42.       function autoScrollLine() {
  43.         /*判断滚动内容是否已经滚完,滚完了则滚动的值重新设置到0
  44.         否则就每隔30毫秒向上滚动1px*/
  45.         if (box.scrollTop >= _contentTotalHeight) {
  46.           box.scrollTop = 0;
  47.         } else {
  48.           box.scrollTop++;
  49.         }
  50.         /*判断滚动的距离刚好为一条數據的高度时停掉定时器,
  51.         隔 _time 之后重新启动定时器即可实现數據滚动停留效果 */
  52.         if (_contentChildHeight.indexOf(box.scrollTop) >= 0) {
  53.           clearInterval(timer)
  54.           setTimeout(() => {
  55.             timer = setInterval(autoScrollLine, 30)
  56.           }, _time)
  57.         }
  58.       }
  59.     }
  60.   }
  61. })(jQuery);
复制代码
使用方法:
  1. $('#font-scroll').FontScroll({ time: 1000 });
复制代码
效果图:

以上就是本文的全部内容,渴望对各人的学习有所资助,也渴望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作