この記事の例では、テーブルのシームレスなスクロールを実現するための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をインストールする方法の詳細な説明
GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...
最新の HTML 標準には、レイアウトを計算するために使用できる calc CSS 式があります。し...
目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...
数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...
目次1. データベースの使用を選択2. 情報を表示する3. テーブルを作成する4. データを挿入する...
ある読者から連絡があり、ダウンロードが終了し、操作がまだ開始されていないのに、なぜ Tomcat の...
私は2年間運用保守に携わり、多くのコマンドを使用しました。特定のLinuxコマンドを習得すると、どれ...
目次1. 左端接頭辞原則2. 表に戻る3. インデックスプッシュダウン序文:インデックス プッシュダ...
導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...
ブラウザの互換性はどんどん良くなってきています。モバイル端末は基本的にすべてWebKitベースです。...
まず、Navicat for MySQL をダウンロードしてインストールする必要があります。正規版の...
ポーリングアルゴリズムの紹介多くの人が職場で nginx を使用しており、その設定に精通しています。...
HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアし...
序文この記事で実装されている要件は、実際には非常に一般的です。たとえば、ユーザーが登録したチャネルを...
Zabbix カスタム スクリプトを使用して監視データを収集する場合、通常、次の問題が発生します。サ...