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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JQueryはスクロールバーでスクロールするテーブルヘッダーをネイティブに実装しています。
  • asp.net+jquery スクロールバーでデータを読み込むドロップダウンコントロール
  • jQueryスクロールコンポーネント（vticker.js）は、ページ上の動的データのスクロール効果を実現します。
  • jQueryをベースに、ページが下までスクロールすると自動的にデータを読み込む機能を実現
  • js/jquery コントロール ページ 動的読み込み データ スライディング スクロール バー 自動読み込み イベント メソッド
  • jQuery スクロール ロード データ メソッド
  • jQueryまたはネイティブjsを使用して、マウスのスクロールによってページに新しいデータを読み込みます。
  • jQuery アナウンススクロール + データを取得するための AJAX 背景
  • スクロールバーを引いてデータを読み込むjQueryコード
  • jQueryはテーブル行データのスクロール効果を実現します

<<:  SQL における参照整合性の詳細な説明 (1 対 1、1 対多、多対多)

>>:  CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

推薦する

MySQLデータベースを操作するためのコマンドラインツールmycliの簡単な紹介

GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...

HTML 左、中央、右の適応レイアウト (calc css 式を使用)

最新の HTML 標準には、レイアウトを計算するために使用できる calc CSS 式があります。し...

JavaScript Promise の徹底解説

目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...

VMware12 インストール centOS8 構成グラフィック チュートリアルの詳細説明 (vm 仮想マシン インストール centos8 チュートリアル)

数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...

MySQL ステートメントの概要

目次1. データベースの使用を選択2. 情報を表示する3. テーブルを作成する4. データを挿入する...

tomcat9.exeをクリックするとクラッシュする問題を解決する方法

ある読者から連絡があり、ダウンロードが終了し、操作がまだ開始されていないのに、なぜ Tomcat の...

よく使うLinuxコマンドのまとめ

私は2年間運用保守に携わり、多くのコマンドを使用しました。特定のLinuxコマンドを習得すると、どれ...

MySQL インデックス プッシュダウンの詳細

目次1. 左端接頭辞原則2. 表に戻る3. インデックスプッシュダウン序文：インデックス プッシュダ...

HTML チュートリアル: よく使われる HTML タグのコレクション (6)

導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...

CSS のサイズ単位についての簡単な説明

ブラウザの互換性はどんどん良くなってきています。モバイル端末は基本的にすべてWebKitベースです。...

Navicat for MySQL チュートリアル

まず、Navicat for MySQL をダウンロードしてインストールする必要があります。正規版の...

Nginxポーリングアルゴリズムの基本的な実装方法の詳細な説明

ポーリングアルゴリズムの紹介多くの人が職場で nginx を使用しており、その設定に精通しています。...

js でショッピングモールのシミュレーションを実現

HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアし...

MySQLを使用して列内の異なる値の数をカウントする例

序文この記事で実装されている要件は、実際には非常に一般的です。たとえば、ユーザーが登録したチャネルを...

Zabbix動的実行監視収集スクリプトの実装原理

Zabbix カスタム スクリプトを使用して監視データを収集する場合、通常、次の問題が発生します。サ...