この記事の例では、テーブルのシームレスなスクロールを実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: SQL における参照整合性の詳細な説明 (1 対 1、1 対多、多対多)
>>: CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明
JavaScript を使用して Web ページ クロックを実装します。効果は次の図に示されています...
最近仕事でnginxの設定を変更する必要が頻繁にあり、nginxでrewriteを使用する方法を学び...
この記事は主にMySQLデータベースのバイナリ型操作を紹介し、具体的な内容を通して紹介します。MyS...
HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...
1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...
このソリューションの利点はシンプルさと使いやすさですが、欠点はダウンタイムが長くなることです。 した...
ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...
目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...
MySQL クエリ結果の行フィールドの結合は、次の 2 つの関数を使用して実装できます。 1. co...
Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...
歴史的な理由により、MySQL レプリケーションは、REDO ログではなく論理バイナリ ログに基づい...
VIP を設定した後、アクティブ/スタンバイの切り替え中に表示されるエラー メッセージは次のとおりで...
マイクロサービスのイメージは、保存用に Docker リポジトリにアップロードされます。一般的に使用...
とあるサイトからレンタルした仮想マシンの有効期限が近づいており、更新料が200元以上かかります。Al...
前回の記事では、webpack と react 環境を設定した後、ログイン インターフェースとその後...