jquery實現表格無縫滾動
阿新 • • 發佈：2021-07-01
本文例項為大家分享了實現表格無縫滾動的具體程式碼，供大家參考，具體內容如下
部分我是用的彈性佈局
*{
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,.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 -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&lhttp://www.cppcns.com 最後就是關鍵部分，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
},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].tvmTvToolUsageCouXlhDCfAnt;
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','#otherThr客棧ee','#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+'</di程式設計客棧v>' +
'<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,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
},function(){
first.css('height',height).appendTo(tableUl);
})
}
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。