原生js实现：表头固定+表体每秒向上滚动一行+滚动到无数据时重新回滚到顶部+可以自定义滚动行数

最新推荐文章于 2024-06-24 15:18:02 发布

keepfitt

最新推荐文章于 2024-06-24 15:18:02 发布

阅读量727

点赞数 1

分类专栏： html+js+css杂记文章标签： css3 javascript html

本文链接：https://blog.csdn.net/weixin_43848571/article/details/112366715

版权

html+js+css杂记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用原生JavaScript和jQuery分别实现表格内容的纵向轮播效果。内容包括固定表头，表体每秒向上滚动一行，数据循环，并在滚动到底部时回滚到顶部。同时，展示了鼠标悬停时暂停，移出时继续滚动的交互功能。示例代码详细解释了实现这一效果的关键步骤和样式设置。

摘要由CSDN通过智能技术生成

描述：原生js开发的一个表格走马灯通用组件，表格表头固定，表体内容可每秒向上滚动一行，（表格内容可通过数组动态循环渲染），表体内容滚动到最后一个时，数据回滚到顶部，重新开始自下向上滚动，表体内容展示单元格行数，单元格长度宽度都可以自定义。

实现效果如下：
在这里插入图片描述

代码如下：

<body>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>手机号</th>
        <th>住址</th>
      </tr>
    </thead>
  </table>
  <div class="scroll-box">
    <table class="scroll-tab">
      <tbody class="tbody">
        <tr>
          <td>1001</td>
          <td>李四啊</td>
          <td>AAAA</td>
          <td>13988776655</td>
          <td>AAAA</td>
        </tr>
        <tr>
          <td>1002</td>
          <td>王五啊</td>
          <td>AAAA</td>
          <td>13988776655</td>
          <td>AAAA</td>
        </tr>
        <tr>
          <td>1003</td>
          <td>王五</td>
          <td>AAAA</td>
          <td>13988776655</td>
          <td>AAAA</td>
        </tr>
        <tr>
          <td>1004</td>
          <td>Jack</td>
          <td>AAAA</td>
          <td>13988776655</td>
          <td>AAAA</td>
        </tr>
        <tr>
          <td>1005</td>
          <td>小兰</td>
          <td>AAAA</td>
          <td>13988776655</td>
          <td>AAAA</td>
        </tr>
        <tr>
          <td>1006</td>
          <td>Jack</td>
          <td>AAAA</td>
          <td>13988776655</td>
          <td>AAAA</td>
        </tr>
        <tr>
          <td>1007</td>
          <td>小兰</td>
          <td>AAAA</td>
          <td>13988776655</td>
          <td>AAAA</td>
        </tr>
        <tr>
          <td>1008</td>
          <td>JackKKK</td>
          <td>AAAA</td>
          <td>13988776655</td>
          <td>AAAA</td>
        </tr>
        <tr>
          <td>1009</td>
          <td>小兰花</td>
          <td>AAAA</td>
          <td>13988776655</td>
          <td>AAAA</td>
        </tr>
        <tr>
          <td>1010</td>
          <td>小ⅩX</td>
          <td>AAAA</td>
          <td>13988776655</td>
          <td>AAAA</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

<script>
  let sTab = document.querySelector('.scroll-tab');//要滚动的表格
  let tbody = sTab.querySelector('.tbody');//要滚动表格的内容
  let distance = sTab.getElementsByTagName('td')[0].offsetHeight ;//每次滚动的距离
  let offsetH = tbody.offsetHeight ;//整个表的高度

  function scrollTop() {
    let m = sTab.offsetTop;//获取要滚动表格的位置
    let n = offsetH + m;//剩余未滚动表格内容的高度
    if (n <= 200) {//比较  剩余未滚动表格内容小于可视表格高度   即滚动到最后一组表格内容
      sTab.style.transition = '0s';//过渡动画设为0秒
      sTab.style.animation = 'moveTop 1s';
      sTab.style.top = 0;//位置设为初始位置 
    } else {
      sTab.style.transition = '1s';
      sTab.style.top = m - distance + 'px';
    }
  }
  setInterval(scrollTop, 1500);
</script>

<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  table {
    border-collapse: collapse;
  }

  th,
  td {
    line-height: 40px;
    text-align: center;
    width: 150px;
  }

  .scroll-tab tr:nth-child(2n) {
    background: #FAFAFA;
  }

  .scroll-tab tr:nth-child(2n+1) {
    background: #ffffff;
  }

  .scroll-box {
    height: 200px;
    overflow: hidden;
    position: relative;
  }

  .scroll-tab {
    position: absolute;
    left: 0;
    top: 0;
    border-top: none;
  }

  .scroll-tab td {
    border-top: none;
  }

  @keyframes moveTop {
    from {
      bottom: 0px;
    }

    to {
      top: 40px;
    }
  }
</style>

jquery下，同原理实现：纵向轮播效果
鼠标悬停时，停止轮播；鼠标移出时，继续轮播

页面布局长这样：
在这里插入图片描述

 <div class="box scroll-box">
        {% for item in advantageList %}
          <div class="item-box scroll-item">
            <div class="item-box-left">
              <img src="{{ item.imgSrc }}" alt="" class="item-img">
            </div>
            <div class="item-box-right">
              <h3 class="item-top item-title">{{item.title}}</h3>
              <p class="item-middle">{{item.description}}</p>
              <p class="item-middle">发布时间：2021-12-12 12:32:32</p>
            </div>
          </div>
        {% endfor %}
 </div>

  .box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
    .item-box {
      display: flex;
      padding: 20px;
      background: #fff;
      .item-box-left {
        .item-img {
          width: 96px;
          height: 96px;
          margin-right: 20px;
        }
      }
      .item-box-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .item-title {
          margin-bottom: 30px;
        }
      }
    }
    .scroll-item {
      width: 100%;
      overflow: hidden;
      cursor: pointer;
      &:hover h3 {
        color: red;
      }
    }
  }
  .scroll-box {
    position: absolute;
    top: 0;
    left: 0;
  }

    $(document).ready(function () {
      //$('.count').countUp();
      let timer;
      let offsetH = $('.scroll-box')[0].offsetHeight; //获取要滚动标签的总高度
      let distance = $('.scroll-item')[0].offsetHeight; //获取展示区域的高度
      function scrollTop() {
        let m = $('.scroll-box')[0].offsetTop; //获取要滚动标签的位置
        let n = offsetH + m; //剩余未滚动内容的高度
        if (n <= distance) { //比较：  当剩余未滚动内容高度小于展示区域高度  即滚动到最后一组数据 回到顶部
          $('.scroll-box').animate({top: 0});
        } else {
          $('.scroll-box').animate({
            top: m - distance + 'px'
          });
        }
      }
      function startTimer() {
        timer = setInterval(scrollTop, 2000);
      }
      $('.scroll-item').hover(function (ev) {
        clearInterval(timer);
      }, function (ev) {
        startTimer();
      });
      startTimer();
    });