HTML Table 列表滚动

最新推荐文章于 2022-05-20 23:54:45 发布

SugarBaiTu

最新推荐文章于 2022-05-20 23:54:45 发布

阅读量1w

点赞数

分类专栏：程序问题记录文章标签： html 前端 table

本文链接：https://blog.csdn.net/c331043/article/details/78626211

版权

程序问题记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考地址 http://www1.qdfuns.com/article-5603914-1-1.html

项目需求：从服务器获得数据在前台填充到Table
前端UI框架 layui http://www.layui.com/
用了layui的数据表格代码。

生成Table后前端简略结构如下

 //html 结构   使tr内容进行滚动
<div class="divWarning">
<div class="layui-table">
<table>
<tbody>
<tr></tr>
。
。信息滚动
。
<tr></tr>

</tbody>
</table>
</div>
</div>

divWarning 是用来定位填充的数据表格，因为页面上也不止一个表格，而表格是layui生成的，所以需在外面嵌套一个div
//js代码

$(function () {
  var $this = $(".divWarning");   //获取 divWarning  （用来定位需要滚动的列表） 由于我生成的表格是使用layui框架生成的，所以需要在table外面嵌套一个div
  var scrollTimer;
  $this.hover(function () {
  clearInterval(scrollTimer);     //清除滚动
  }, function () {
  scrollTimer = setInterval(function () {
  scrollNews($this);
  }, 2000); //每条列表之间滚动的间隔请改此处数字，数值越大，间隔越长
  }).trigger("mouseout");
  });

  function scrollNews(obj) {
  var $layuitable = obj.find(".layui-table:last");   //定位滚动的dom
  var lineHeight = 38;//因为行高是38px  (列表内容高38px)
  $layuitable.animate({
  "margin-top": -lineHeight + "px"     //向上移动
  }, 3000, function () { //每条新闻从出现到消失的时间请改此处数字，数值越小，消失的越快
  $layuitable.css({
  "margin-top": "0px"       //移动到设定高度后更改最高的位置，获取第一行tr追加到tbody最后
  }).find("tr:first").appendTo(obj.find("tbody:first"));
  });
  }