利用javascript实现表格内容向上自动滚动轮播

利用html+css+javascript实现表格内容向上自动滚动轮播，下面web建站小编给大家介绍一下具体实现代码！

html代码：

<div id="box">
  <table id="table">
    <thead class="table-thead">
      <tr>
        <th>姓名</th>
        <th>城市</th>
        <th>数量</th>
      </tr>
    </thead>
    <tbody class="table-tbody">
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
      <tr>
        <td>王小米</td>
        <td>哈尔滨</td>
        <td>100</td>
      </tr>
    </tbody>
  </table>
</div>

css代码：

* {
  margin:0px;
  padding:0px;
}
.table-tbody td {
  width:180px;
  text-align:center;
}
table tr {
  height:40px;
}
#box {
  height:200px;
  width:720px;
  overflow:hidden;
}
.table-thead {
  position:sticky;
  top:0;
  background-color:#eee;
}

javascript代码：

window.onload = function() {
  var box = document.getElementById("box");
  var table = document.getElementById("table");
  box.scrollTop = 0;
  var timer = null;
  timer = setInterval(function() {
    box.scrollTop++;
    if (box.scrollTop > box.offsetHeight) {
      box.scrollTop = 0;
    }
  }, 30);
  box.onmouseover = function() {
    clearInterval(timer)
  }
  box.onmouseout = function() {
    timer = setInterval(function() {
      box.scrollTop++;
      if (box.scrollTop > box.offsetHeight) {
        box.scrollTop = 0;
      }
    }, 30)
  };
}

一款专门为Web设计和前端开发提供了丰富的矢量图标资源库——FontAwesome

推荐一套开源、高质量的 SVG 图标库——Heroicons

宝塔Nginx配置只允许指定网址访问接口

一款免费在线CSS动画缓动曲线编辑器——Easing Wizard

一款用于在网页上生成五彩纸屑特效的JavaScript库——Canvas Confetti

标签： js自动滚动轮播, table滚动

上面是“利用javascript实现表格内容向上自动滚动轮播”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_13715.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！