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

 更新时间:2021-08-05 16:23:37   作者:佚名   我要评论(0)

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


<div class="box">
<div class="b

本文实例为大家分享了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原生态实现表格header头随滚动条滚动而滚动
  • asp.net+jquery滚动滚动条加载数据的下拉控件
  • jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
  • 基于jquery实现页面滚动到底自动加载数据的功能
  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
  • jquery滚动加载数据的方法
  • 使用jQuery或者原生js实现鼠标滚动加载页面新数据
  • Jquery公告滚动+AJAX后台得到数据
  • 拉动滚动条加载数据的jquery代码

您可能感兴趣的文章:

相关文章

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

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

    本文实例为大家分享了jQuery实现表格行数据滚动效果的具体代码,供大家参考,具体内容如下 HTML代码: <div class="box"> <div class="b
    2021-08-05
  • Vue3和Electron实现桌面端应用详解

    Vue3和Electron实现桌面端应用详解

    目录Vue CLI 搭建Vue项目Vue项目改造为markdown编辑器Vue CLI Plugin Electron Builder优化功能启动全屏显示修改菜单栏编辑器打开markdonw文
    2021-08-05
  • Vue 可拖拽组件Vue Smooth DnD的使用详解

    Vue 可拖拽组件Vue Smooth DnD的使用详解

    目录简介和 Demo 展示API: Container属性生命周期回调事件API: Draggable实战简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好
    2021-08-05
  • jquery实现购物车功能(1)

    jquery实现购物车功能(1)

    本文实例为大家分享了jquery实现购物车功能的具体代码,供大家参考,具体内容如下 html &#8203;<!DOCTYPE html> <html> <head> <title>购物
    2021-08-05
  • jsp Response对象页面重定向、时间的动态显示

    jsp Response对象页面重定向、时间的动态显示

    Response对象 response对象主要用于对客户端的请求进行回应,将web服务器处理后的结果发回给客户端,封装了jsp产生的响应,并发送到客户端响
    2021-08-04
  • golang fmt格式“占位符”的实例用法详解

    golang fmt格式“占位符”的实例用法详解

    golang 的fmt 包实现了格式化I/O函数,类似于C的 printf 和 scanf。 # 定义示例类型和变量 type Human struct { Name string } var p
    2021-08-04
  • golang中字符串MD5生成方式总结

    golang中字符串MD5生成方式总结

    方案一 func md5V(str string) string { h := md5.New() h.Write([]byte(str)) return hex.EncodeToString(h.Sum(nil)) } 方
    2021-08-04
  • 试了下Golang实现try catch的方法

    试了下Golang实现try catch的方法

    目录前言 能不能 try catch 加入处理异常方法 总结 前言 Golang语言有诸多优点:静态编译、协程、堪比c语言的高性能。 但是也有一
    2021-08-04
  • Go 每日一库之termtables的使用

    Go 每日一库之termtables的使用

    目录快速使用 模式 总结 今天学个简单点的&#128512;,termtables处理表格形式数据的输出。适用于随时随地的输出一些状态或统计数据,便于
    2021-08-04
  • Golang try catch与错误处理的实现

    Golang try catch与错误处理的实现

    目录Golang try catch panic panic主要使用场景: recover error 预定义错误值 自定义错误类型 使用 panic和recover模拟 tyr catch
    2021-08-04

最新评论