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

推薦する

nginx proxy_pass 設定で URL が / で終わる場合と / なしで終わる場合の違いの詳細な説明

nginx が proxy_pass を設定する場合、末尾に "/" がある U...

Node.js環境でMySQLデータベースを素早く操作する方法を詳しく説明します

GitHub アドレス: https://github.com/dmhsq/dmhsq-mysql-...

CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します

1. CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します1. 一般的なスタ...

mysql8.0.11をインストールしてrootパスワードを変更し、navicat for mysqlに接続するアイデアの詳細な説明

1.1. ダウンロード:公式ウェブサイトから zip パッケージをダウンロードします。私は 64 ビ...

Vue カスタム オプション時間カレンダー コンポーネント

この記事の例では、参考のためにvueカスタムオプションタイムカレンダーコンポーネントの具体的なコード...

背景画像に CSS3 変換を適用するためのソリューション

CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場...

CSSでプロセスナビゲーション効果を実現する（3つの方法）

CSS によりプロセスナビゲーション効果を実現します。具体的な内容は以下のとおりです。 ::tip...

Vueの監視方法のケースの詳細な説明

Vueでの監視方法時計知らせ名前: 監視する属性に同じ名前を付ける必要があります。 1. 機能Vue...

MySQL/MariaDB ルートパスワードリセットチュートリアル

序文パスワードを忘れることは、よく遭遇する問題です。MySQL または MariaDB データベース...

JavaScript の絶妙なスネーク実装プロセス

目次1. HTML構造を作成する2. テーブルを作成する3. ヘビの頭と体を作る4. 食べ物を作る5...

dockerを使用してdubboプロジェクトをデプロイする方法

1. まず、Springbootを使用して簡単なDubboテストプログラムを構築し、関連する依存関係...

Vscode が Ubuntu にリモート接続する際のエラー問題の解決方法

1. 事件の背景：仕事上、Ubuntu への vscode リモート接続を使用する必要があります。 ...

Linux で完全な Samba サーバーを構築する方法 (CentOS バージョン)

序文smb は、クライアントとサーバー間の Web 接続および情報通信に使用できるプロトコルの名前で...

Vueフレームワークで習得しなければならない重要な知識を学びます

1. Vueとは何かVue は、ユーザー ページを構築するためのプログレッシブ フレームワークです。...

CSS で隠し要素を実現する 7 つの興味深い方法

序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...