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

728 ℃

利用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)
  };
}

Nginx设置301定向跳转,重定跳到新的URL链接

Motion Vue:无需编写复杂的命令式代码,轻松实现动画效果

css3动画导航列表动态效果(附实例)

ButtonsGenerator:一个免费的CSS按钮在线生成工具

盘点宝塔SSH工具常见的35个命令

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

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

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

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

生活小工具

收录了万年历、老黄历、八字智能排盘等100+款小工具!生活小工具
es6语法利用函数将json字符串转为对象
layDate时间组件的运用(附下载layDate-v5.3.1)
做单页面优化需要掌握哪些技巧?(自由列表)
利用jquery做一个打字机效果(支持左右上下)
前端利用lodop插件如何获取打印状态(打印成功后回调)