参考地址 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"));
});
}