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)
        }

结构部分

    

        title1
        title2
        title3
    
    

        

            
item1item1item1
            
item2item2item2
            
item3item3item3
            
item4item2item2
            
item5item3item3
            
item6item2item2
            
item7item3item3
            
item8item2item2
            
item9item3item3
            
item10item2item2
            
item11item3item3
            
item12item2item2
            
item13item3item3
            
item14item2item2
            
item15item3item3
            
item16item2item2
        
    

最后就是关键部分，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 = '
'+tableData.torqueToolTotalCount+'
' +
        '
'+tableData.torqueToolUsingCount+'
' +
        '
'+tableData.torqueToolAvailableCount+'
' +
        '
'+tableData.torqueToolNeedCheckCount+'
'
    var orderToolString = '
'+tableData.otherToolTotalCount+'
' +
        '
'+tableData.otherToolUsingCount+'
' +
        '
'+tableData.otherToolAvailableCount+'
' +
        '
'+tableData.otherToolNeedCheckCount+'
'
    var toolTotalString = '
'+tableData.totalToolCount+'
' +
        '
'+tableData.totalToolUsingCount+'
' +
        '
'+tableData.totalToolAvailableCount+'
' +
        '
'+tableData.totalToolNeedCheckCount+'
'
 
    $(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 += ' 
'+
                '
'+value.content+'
'+
                '
'+value.createTime+'
'+
                '
'
        }else{
            tableString +=  ' 
'+
                '
'+value.content+'
'+
                '
'+value.createTime+'
'+
                '
'
        }
    });
    $(obj).empty();
    $(obj).html(tableString);
}
 
function renderUseStateTable (obj,tableData){
    var tableString = '';
 
    $.each(tableData,function(index,value){
        if(index % 2 == 0){
            tableString += '
'+
                ''+value.totalPositionEncoding+''+value.toolCode+''+
                '
'
        }else{
            tableString +=  '
'+
                ''+value.totalPositionEncoding+''+value.toolCode+''+
                '
'
        }
    })
 
    $(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);
    })
}
 
 
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。