HTML Table 列表滚动

参考地址 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"));
  });
  }
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值