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をインストールする方法の詳細な説明

推薦する

JavaScript でシンプルな Web 時計を実装する

JavaScript を使用して Web ページ クロックを実装します。効果は次の図に示されています...

nginx rewriteを使用してURLをリダイレクトする方法

最近仕事でnginxの設定を変更する必要が頻繁にあり、nginxでrewriteを使用する方法を学び...

MySQL でのバイナリ型操作

この記事は主にMySQLデータベースのバイナリ型操作を紹介し、具体的な内容を通して紹介します。MyS...

HTMLで下線を設定するには？HTMLでテキストに下線を付ける方法

HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...

Nginx でアクセス頻度、ダウンロード速度、同時接続数を制限する方法

1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...

MySQLdump コマンドを使用した MySQL データの移行

このソリューションの利点はシンプルさと使いやすさですが、欠点はダウンタイムが長くなることです。 した...

Vue.js のミックスインの詳細な説明

ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...

Node.js のモジュール性、npm パッケージ マネージャーの説明

目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...

MySQL で複数のフィールドを連結する詳細な例

MySQL クエリ結果の行フィールドの結合は、次の 2 つの関数を使用して実装できます。 1. co...

W3C チュートリアル (12): W3C SOAP アクティビティ

Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...

MySQL マスタースレーブ同期遅延の原因と解決策

歴史的な理由により、MySQL レプリケーションは、REDO ログではなく論理バイナリ ログに基づい...

MySQL マスタースレーブスイッチチャネルの問題の解決策

VIP を設定した後、アクティブ/スタンバイの切り替え中に表示されるエラー メッセージは次のとおりで...

プライベートイメージウェアハウスを構築するためのDockerレジストリの実装方法

マイクロサービスのイメージは、保存用に Docker リポジトリにアップロードされます。一般的に使用...

Docker nginxは1つのホストを実装して複数のサイトを展開します

とあるサイトからレンタルした仮想マシンの有効期限が近づいており、更新料が200元以上かかります。Al...

Reactはルーティングを使用してログインインターフェースにリダイレクトします

前回の記事では、webpack と react 環境を設定した後、ログイン インターフェースとその後...