jquery实现表格无缝滚动
作者：caimaomaocai
这篇文章主要为大家详细介绍了jquery实现表格无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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);
})
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。