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

717 ℃

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

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

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

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

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

汇聚全网热榜API,包括百度/微博/哔哩/抖音/今日头条/百度贴吧等等

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

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

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

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

生活小工具

收录了万年历、老黄历、八字智能排盘等100+款小工具!生活小工具
网站该怎样做才能更好的吸引百度蜘蛛?
js按钮控制全屏和退出全屏
Go语言文件如何正确关闭代码
帝国cms手机wap模板中如何调用栏目的分类
vuejs接口axios传参的两种方式Form Data和Request Payload