良いアイデアを見つけたので記録しました。 私は以前、スクロール効果を実現するためにjQueryを使用したことがあります。これらの2つの記事では、記事1、記事2でそれぞれscrollLeft()とscrollTop()、scroll()を使用して、 後でデモを見て、これは素晴らしいアイデアだと思いました。リスト項目をスクロールするのに使えると思いました。効果はおそらく次のようになります。 アイデアは次のとおりです。 コード: //入力するデータvar data = { 情報項目: [ 「<strong>1 行目:</strong>Anzhian ...」 「<strong>2 行目:</strong>サンシャイン レインボー リトル ホワイト ホースサンシャイン レインボー リトル ホワイト ホース」 「<strong>第3行:</strong> 天と地の広大さ。天と地の広大さ。天と地の広大さ。天と地の広大さ。」 ] } // ページにデータを動的に入力します var infoList = [] (i = 0 とします; i < data.infoItem.length; i++){ infoStr = `<div class="item">${data.infoItem[i]}</div>` とします。 infoList.push(infoStr); } $(".info-wrapper").html(infoList.join("")) // 2秒ごとに実行するタイマーを設定します(1回変更) var タイマー = null; タイマー = setInterval(関数() { // 最初の行の項目を最後の行に移動し、他の項目を空いている行まで上に移動します var infoItemTmp = infoList.shift(); $(".info-wrapper").append(infoItemTmp); $(".item:first").remove(); infoList.push(infoItemTmp) }, 2000) HTML とスタイル部分: <div class="コンテナ"> <div class="wrapper"> <div class="info"> <div class="info-wrapper"></div> </div> </div> </div> 。容器 { 幅: 900ピクセル; 高さ: 400px; 境界線: 2px 実線 #eee; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 } .ラッパー{ 幅: 500ピクセル; 高さ: 300px; 境界線: 1px 実線 #ccc; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; コンテンツの位置を中央揃えにします。 } 。情報 { 幅: 100%; 高さ: 100%; ディスプレイ: フレックス; flex-direction: 列; コンテンツの両端揃え: スペースの間; コンテンツの位置を中央揃えにします。 } .infoラッパー{ 幅: 100%; 高さ: 100%; オーバーフロー: 非表示; } 。アイテム { 境界線: 2px 実線 #ccc; border-left: 4px 実線オレンジ; 高さ: 80px; 幅: 100%; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 ボックスのサイズ: 境界線ボックス; 境界線の半径: 8px; 上マージン: 20px; } 現在の影響は次のとおりです。 さらにスライド効果アニメーション: .item:最初の子 { アニメーション: 2 秒線形移動; } @keyframes 移動 { 100% { 上マージン: -80px; } } 新しいアイテムを追加できる位置に到達するまでスライドを続け、新しいアイテムの追加をトリガーします。 // アニメーション中に設定された時間と同じ、2 秒ごとに実行 (1 回変更) するようにタイマーを設定します。var timer = null; タイマー = setInterval(関数() { ($('.info').scrollTop() + $('.info').height() >= $('.info-wrapper').height()) の場合 { // 最初の行の項目を最後の行に移動し、他の項目を空いている行まで上に移動します var infoItemTmp = infoList.shift(); $(".info-wrapper").append(infoItemTmp); $(".item:first").remove(); infoList.push(infoItemTmp) } }, 2000) 冒頭の効果を得ることができます 以上で、jQuery をベースにリスト ループ スクロールを実装するコツ (超簡単) についての記事は終了です。jQuery リスト ループ スクロールに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: SecureCRT に基づくリモート Linux ホストへのファイルのアップロードとダウンロードのグラフィカルな手順
>>: MySQL5.6 GTIDモードで同期レプリケーションエラーをスキップできない問題の解決方法
MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...
ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...
この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...
コードをコピーコードは次のとおりです。 <div id="名前"> ...
CSS でテキストアイコンを実装する方法 /*アイコンスタイル*/ .nav-icon-norma...
React で国際化を実現するにはどうすればよいでしょうか? react-intlプラグインは、Re...
ステートメント 1: <link rel="shortcut icon" ...
これを応用することで、ウェブサイトの一部の公開領域を独立したページにすることができ、その後、この技術...
序文この記事では主に、CSS3 を使用してテキスト折り紙効果を実現する例を紹介します。これは、参考と...
Docker-compose は GitLab をデプロイします1. Dockerをインストールする...
この記事ではMySQL 5.7.20のインストールと設定方法を記録し、皆さんと共有します1. MyS...
テーブル内の min-width と max-width プロパティの設定 <テーブル>...
1つ、 G:\MySQL\MySQL Server 5.7\bin> mysqld --ini...
この記事では、Java接続MySQLの基礎となるカプセル化コードを参考までに紹介します。具体的な内容...
目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...