jquery實(shí)現(xiàn)表格無(wú)縫滾動(dòng)

更新時(shí)間：2021年06月30日 09:53:42 作者：caimaomaocai

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格無(wú)縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)表格無(wú)縫滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

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

結(jié)構(gòu)部分

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

最后就是關(guān)鍵部分，js部分

鼠標(biāo)滑過(guò)時(shí)清除定時(shí)器的寫法

$(function(){
    //鼠標(biāo)滑過(guò)時(shí)清除定時(shí)器
    $(".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、鼠標(biāo)滑過(guò)時(shí)不清除定時(shí)器

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

實(shí)現(xiàn)的效果：

接口輪詢調(diào)用的時(shí)候踩了一個(gè)坑，如果換成接口調(diào)用，一定要記得加上有沒(méi)有定時(shí)器的判斷

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('數(shù)據(jù)',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('數(shù)據(jù)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);
          }
        }
    });
};
/**
 * 扭矩間數(shù)據(jù)渲染函數(shù)
 */
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)
 
}
 
/**
 *操作記錄表格渲染函數(shù)
 */
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);
    })
}
 
 
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: