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>

마지막 부분
마우스 가 미 끄 러 졌 을 때 타이머 쓰기 지우 기

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

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.