jQueryはテーブルのシームレスなスクロールを実現します

この記事の例では、テーブルのシームレスなスクロールを実現するためのjQueryの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

CSS部分にはエラスティックレイアウトを使用しました

*{
            マージン:0;
            パディング:0;
        }
        ul、li{
            リストスタイル:なし;
        }
        .tableBox{
            幅:500ピクセル;
            高さ:520px;
            背景:#e8e8e8;
            マージン:0 自動;
            オーバーフロー:非表示;
        }
        .スライドタイトル{
            高さ：2.5rem;
            行の高さ:2.5rem;
            ディスプレイ:フレックス;
            背景:#223e80;
            色:#fff;
            テキスト配置:中央;
        }
        .スライドタイトルスパン{
            フレックス：1;
        }
        .スライドリスト li{
            行の高さ:1.875rem;
            高さ:1.875rem;
            ディスプレイ:フレックス;
        }
        .slide-list li span{
            フレックス：1;
            テキスト配置:中央;
        }
        .スライドリスト li.odd{
            背景:rgba(0,0,0,.3)
        }

構造

<div class="tableBox">
    <div class="スライドタイトル">
        <span>タイトル1</span>
        <span>タイトル2</span>
        <span>タイトル3</span>
    </div>
    <div class="スライドコンテナ">
        <ul class="スライドリスト js-スライドリスト">
            <li class="odd"><span>項目1</span><span>項目1</span><span>項目1</span></li>
            <li class="even"><span>項目2</span><span>項目2</span><span>項目2</span></li>
            <li class="odd"><span>項目3</span><span>項目3</span><span>項目3</span></li>
            <li class="even"><span>項目4</span><span>項目2</span><span>項目2</span></li>
            <li class="odd"><span>項目5</span><span>項目3</span><span>項目3</span></li>
            <li class="even"><span>項目6</span><span>項目2</span><span>項目2</span></li>
            <li class="odd"><span>項目7</span><span>項目3</span><span>項目3</span></li>
            <li class="even"><span>項目8</span><span>項目2</span><span>項目2</span></li>
            <li class="odd"><span>項目9</span><span>項目3</span><span>項目3</span></li>
            <li class="even"><span>項目10</span><span>項目2</span><span>項目2</span></li>
            <li class="odd"><span>項目11</span><span>項目3</span><span>項目3</span></li>
            <li class="even"><span>項目12</span><span>項目2</span><span>項目2</span></li>
            <li class="odd"><span>項目13</span><span>項目3</span><span>項目3</span></li>
            <li class="even"><span>項目14</span><span>項目2</span><span>項目2</span></li>
            <li class="odd"><span>項目15</span><span>項目3</span><span>項目3</span></li>
            <li class="even"><span>項目16</span><span>項目2</span><span>項目2</span></li>
        </ul>
    </div>
</div>

最後に、重要な部分、jsの部分

マウスを移動したときにタイマーをクリアする方法

$(関数(){
    // マウスが $(".slide-list").hover(function(){ の上に移動したらタイマーをクリアします。
        スクロールタイマーの間隔をクリアします。
    }、関数（）{
        scrollTimer = setInterval(関数(){
            自動スクロール(".スライドリスト")
        },2000);
    });
 
 
    関数 autoScroll(obj){
            var テーブルUl = $(obj);
            var first = tableUl.find('li:first');
            var height = first.height();
            first.animate({
                高さ:0
            },500,関数(){
                first.css('height',height).appendTo(tableUl);
            })
    }
   var scrollTimer = setInterval(function(){
        自動スクロール(".スライドリスト")
    },2000)
})

2. マウスを動かしてもタイマーはクリアされない

$(関数(){
    
    
    関数 autoScroll(obj){
            var テーブルUl = $(obj);
            var first = tableUl.find('li:first');
            var height = first.height();
            first.animate({
                高さ:0
            },500,関数(){
                first.css('height',height).appendTo(tableUl);
            })
    }
   setInterval(関数(){
        自動スクロール(".スライドリスト")
    },2000)
})

達成された効果:

インターフェースポーリング呼び出しで落とし穴にハマりました。インターフェース呼び出しに変更する場合は、タイマーの有無の判断を追加することを忘れないようにしましょう。

if(タイマー != null) {
    タイマーの間隔をクリアします。
}

完全なコードは次のとおりです。

$(関数(){
 
 
var allUrl = "http://localhost:8899/tv/alldata";
 
レンダリングページ();
 
 var タイマー = setInterval(関数(){
    レンダリングページ ()
},5000);
if(タイマー != null) {
    タイマーの間隔をクリアします。
}
 
 
関数renderPage(){
    コンソールログ(111);
    $.ajax({
        url:allUrl、
        非同期:true、
        成功:関数(結果){
          console.log(結果);
          if(結果成功 === true){
              console.log('データ',結果.データ);
              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)
 
              Niuju をレンダリングします('#banshouOne','#otherOne','#totalOne',niujuOneData);
              renderNiuju('#banshouTwo','#otherTwo','#totalTwo',niujuTwoData);
              renderNiuju('#banshouThree','#otherThree','#totalThree',niujuThreeData);
              renderNiuju('#banshouFour','#otherFour','#totalFour',niujuFourData);
              レコードテーブルをレンダリングします('#tvTableFour'、レコードテーブルデータ);
              '#tvTableOne' をレンダリングして、UseStateTable を使用します。
              '#tvTableTwo' を useTableTwoData でレンダリングして、UseStateTable をレンダリングします。
              useTableThreeData をレンダリングします。
          }
        }
    });
};
/**
 * トルクデータレンダリング機能 */
関数 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(niujuレンチ文字列)
    $(obj2).html(オーダーツール文字列)
    $(obj3).html(ツール合計文字列)
 
}
 
/**
 * 操作記録テーブルレンダリング機能 */
関数 renderRecordTable (obj, tableData) {
    var テーブル文字列 = '';
    $.each(テーブルデータ、関数(インデックス、値){
        if(インデックス % 2 == 0){
            テーブル文字列 += ' <li class="odd">'+
                '<div class="tq-des">'+value.content+'</div>'+
                '<div class="tq-time">'+value.createTime+'</div>'+
                '</li>'
        }それ以外{
            テーブル文字列 += ' <li class="even">'+
                '<div class="tq-des">'+value.content+'</div>'+
                '<div class="tq-time">'+value.createTime+'</div>'+
                '</li>'
        }
    });
    空のオブジェクト
    $(obj).html(テーブル文字列);
}
 
関数 renderUseStateTable (obj, tableData) {
    var テーブル文字列 = '';
 
    $.each(テーブルデータ、関数(インデックス、値){
        if(インデックス % 2 == 0){
            テーブル文字列 += '<li class="odd">'+
                '<span>'+value.totalPositionEncoding+'</span><span>'+value.toolCode+'</span>'+
                '</li>'
        }それ以外{
            テーブル文字列 += '<li class="even">'+
                '<span>'+value.totalPositionEncoding+'</span><span>'+value.toolCode+'</span>'+
                '</li>'
        }
    })
 
    $(obj).html(テーブル文字列);
 
}
 
setInterval(関数(){
    自動スクロール("#tvTableOne")
    自動スクロール("#tvTableTwo")
    自動スクロール("#tvTableThree")
    自動スクロール("#tvTableFour")
},2000)
 
関数 autoScroll(obj){
    var テーブルUl = $(obj);
    var first = tableUl.find('li:first');
    var height = first.height();
    first.animate({
        高さ:0
    },500,関数(){
        first.css('height',height).appendTo(tableUl);
    })
}
 
 
});

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: