本文实例为大家分享了jquery实现表格无缝滚动的具体代码，供大家参考，具体内容如下
css部分我是用的弹性布局
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
.tableBox{
width:500px;
height:520px;
background:#e8e8e8;
margin:0 auto;
overflow:hidden;
}
.slide-title{
height:2.5rem;
line-height:2.5rem;
display:flex;
background:#223e80;
color:#fff;
text-align:center;
}
.slide-title span{
flex:1;
}
.slide-list li{
line-height:1.875rem;
height:1.875rem;
display:flex;
}
.slide-list li span{
flex:1;
text-align:center;
}
.slide-list li.odd{
background:rgba(0,0,0,.3)
}
结构部分
<div class=\"tableBox\">
<div class=\"slide-title\">
<span>title1</span>
<span>title2</span>
<span>title3</span>
</div>
<div class=\"slide-container\">
<ul class=\"slide-list js-slide-list\">
<li class=\"odd\"><span>item1</span><span>item1</span><span>item1</span></li>
<li class=\"even\"><span>item2</span><span>item2</span><span>item2</span></li>
<li class=\"odd\"><span>item3</span><span>item3</span><span>item3</span></li>
<li class=\"even\"><span>item4</span><span>item2</span><span>item2</span></li>
<li class=\"odd\"><span>item5</span><span>item3</span><span>item3</span></li>
<li class=\"even\"><span>item6</span><span>item2</span><span>item2</span></li>
<li class=\"odd\"><span>item7</span><span>item3</span><span>item3</span></li>
<li class=\"even\"><span>item8</span><span>item2</span><span>item2</span></li>
<li class=\"odd\"><span>item9</span><span>item3</span><span>item3</span></li>
<li class=\"even\"><span>item10</span><span>item2</span><span>item2</span></li>
<li class=\"odd\"><span>item11</span><span>item3</span><span>item3</span></li>
<li class=\"even\"><span>item12</span><span>item2</span><span>item2</span></li>
<li class=\"odd\"><span>item13</span><span>item3</span><span>item3</span></li>
<li class=\"even\"><span>item14</span><span>item2</span><span>item2</span></li>
<li class=\"odd\"><span>item15</span><span>item3</span><span>item3</span></li>
<li class=\"even\"><span>item16</span><span>item2</span><span>item2</span></li>
</ul>
</div>
</div>
最后就是关键部分，js部分
鼠标滑过时清除定时器的写法
$(function(){
//鼠标滑过时清除定时器
$(\".slide-list\").hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer=setInterval(function (){
autoScroll(\".slide-list\")
},2000);
});
function autoScroll(obj){
var tableUl = $(obj);
var first = tableUl.find(\'li:first\');
var height = first.height();
first.animate({
height:0
},500,function(){
first.css(\'height\',height).appendTo(tableUl);
})
}
var scrollTimer = setInterval(function(){
autoScroll(\".slide-list\")
},2000)
})
2、鼠标滑过时不清除定时器
$(function(){
function autoScroll(obj){
var tableUl = $(obj);
var first = tableUl.find(\'li:first\');
var height = first.height();
first.animate({
height:0
},500,function(){
first.css(\'height\',height).appendTo(tableUl);
})
}
setInterval(function(){
autoScroll(\".slide-list\")
},2000)
})
实现的效果：
接口轮询调用的时候踩了一个坑，如果换成接口调用，一定要记得加上有没有定时器的判断
if(timer != null) {
clearInterval(timer);
}
完整的代码如下
$(function(){
var allUrl = \"http://localhost:8899/tv/alldata\";
renderPage ();
var timer = setInterval(function(){
renderPage ()
},5000);
if(timer != null) {
clearInterval(timer);
}
function renderPage () {
console.log(111);
$.ajax({
url:allUrl,
async:true,
success:function(result){
console.log(result);
if(result.success === true){
console.log(\'数据\',result.data);
var niujuOneData = result.data.counts[0].tvmTvToolUsageCount;
var niujuTwoData = result.data.counts[1].tvmTvToolUsageCount;
var niujuThreeData = result.data.counts[2].tvmTvToolUsageCount;
var niujuFourData = result.data.counts[3].tvmTvToolUsageCount;
var recordTableData = result.data.history;
var useTableOneData = result.data.usage.needCheckTools;
var useTableTwoData = result.data.usage.expireCheckTools;
var useTableThreeData = result.data.usage.usingTools;
console.log(\'数据1\',niujuOneData)
renderNiuju (\'#banshouOne\',\'#otherOne\',\'#totalOne\',niujuOneData);
renderNiuju (\'#banshouTwo\',\'#otherTwo\',\'#totalTwo\',niujuTwoData);
renderNiuju (\'#banshouThree\',\'#otherThree\',\'#totalThree\',niujuThreeData);
renderNiuju (\'#banshouFour\',\'#otherFour\',\'#totalFour\',niujuFourData);
renderRecordTable (\'#tvTableFour\',recordTableData);
renderUseStateTable (\'#tvTableOne\',useTableOneData);
renderUseStateTable (\'#tvTableTwo\',useTableTwoData);
renderUseStateTable (\'#tvTableThree\',useTableThreeData);
}
}
});
};
/**
* 扭矩间数据渲染函数
*/
function renderNiuju (obj1,obj2,obj3,tableData) {
var niujuWrenchString = \'<div class=\"tq-niuju-title-item blue\">\'+tableData.torqueToolTotalCount+\'</div>\' +
\'<div class=\"tq-niuju-title-item purple\">\'+tableData.torqueToolUsingCount+\'</div>\' +
\'<div class=\"tq-niuju-title-item green\">\'+tableData.torqueToolAvailableCount+\'</div>\' +
\'<div class=\"tq-niuju-title-item red\">\'+tableData.torqueToolNeedCheckCount+\'</div>\'
var orderToolString = \'<div class=\"tq-niuju-title-item blue\">\'+tableData.otherToolTotalCount+\'</div>\' +
\'<div class=\"tq-niuju-title-item purple\">\'+tableData.otherToolUsingCount+\'</div>\' +
\'<div class=\"tq-niuju-title-item green\">\'+tableData.otherToolAvailableCount+\'</div>\' +
\'<div class=\"tq-niuju-title-item red\">\'+tableData.otherToolNeedCheckCount+\'</div>\'
var toolTotalString = \'<div class=\"tq-niuju-title-item blue\">\'+tableData.totalToolCount+\'</div>\' +
\'<div class=\"tq-niuju-title-item purple\">\'+tableData.totalToolUsingCount+\'</div>\' +
\'<div class=\"tq-niuju-title-item green\">\'+tableData.totalToolAvailableCount+\'</div>\' +
\'<div class=\"tq-niuju-title-item red\">\'+tableData.totalToolNeedCheckCount+\'</div>\'
$(obj1).html(niujuWrenchString)
$(obj2).html(orderToolString)
$(obj3).html(toolTotalString)
}
/**
*操作记录表格渲染函数
*/
function renderRecordTable (obj,tableData){
var tableString = \'\';
$.each(tableData,function(index,value){
if(index % 2 == 0){
tableString += \' <li class=\"odd\">\'+
\'<div class=\"tq-des\">\'+value.content+\'</div>\'+
\'<div class=\"tq-time\">\'+value.createTime+\'</div>\'+
\'</li>\'
}else{
tableString += \' <li class=\"even\">\'+
\'<div class=\"tq-des\">\'+value.content+\'</div>\'+
\'<div class=\"tq-time\">\'+value.createTime+\'</div>\'+
\'</li>\'
}
});
$(obj).empty();
$(obj).html(tableString);
}
function renderUseStateTable (obj,tableData){
var tableString = \'\';
$.each(tableData,function(index,value){
if(index % 2 == 0){
tableString += \'<li class=\"odd\">\'+
\'<span>\'+value.totalPositionEncoding+\'</span><span>\'+value.toolCode+\'</span>\'+
\'</li>\'
}else{
tableString += \'<li class=\"even\">\'+
\'<span>\'+value.totalPositionEncoding+\'</span><span>\'+value.toolCode+\'</span>\'+
\'</li>\'
}
})
$(obj).html(tableString);
}
setInterval(function(){
autoScroll(\"#tvTableOne\")
autoScroll(\"#tvTableTwo\")
autoScroll(\"#tvTableThree\")
autoScroll(\"#tvTableFour\")
},2000)
function autoScroll(obj){
var tableUl = $(obj);
var first = tableUl.find(\'li:first\');
var height = first.height();
first.animate({
height:0
},500,function(){
first.css(\'height\',height).appendTo(tableUl);
})
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容