jQuery をベースにリスト ループ スクロールを実装するためのヒント (超簡単)

jQuery をベースにリスト ループ スクロールを実装するためのヒント (超簡単)

良いアイデアを見つけたので記録しました。

私は以前、スクロール効果を実現するために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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JQuery はシームレスな上向き円形スクロールリストの特殊効果を実現します
  • jQuery はニュースを表示するためのリストの自動スクロールを実装します
  • jQuery ループ スクロール ニュース リスト サンプル コード
  • jQueryはリストの自動円形スクロールを実装し、マウスがホバーするとスクロールを停止します。
  • jQuery を使用した連続および一時停止可能なスクロールの例
  • jQuery は、上下の円形スクロール プラグインの使用例を制御します (デモ ソース コードのダウンロード付き)
  • さまざまな JQuery ループスクロールテキストおよび画像効果コード

<<:  SecureCRT に基づくリモート Linux ホストへのファイルのアップロードとダウンロードのグラフィカルな手順

>>:  MySQL5.6 GTIDモードで同期レプリケーションエラーをスキップできない問題の解決方法

推薦する

MySQL パーティションテーブルの正しい使用方法

MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...

HTML メタビューポート属性の説明

ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...

JavaScript タイピングゲーム

この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

HTML で js を使用してローカル システム時間を取得する

コードをコピーコードは次のとおりです。 <div id="名前"> ...

文字列の最初の文字を取得してテキストアイコン機能を実現する純粋なCSS

CSS でテキストアイコンを実装する方法 /*アイコンスタイル*/ .nav-icon-norma...

React の国際化 react-intl の使用

React で国際化を実現するにはどうすればよいでしょうか? react-intlプラグインは、Re...

ショートカットアイコンとアイコンコードの違いの紹介

ステートメント 1: <link rel="shortcut icon" ...

shtml includeの使い方

これを応用することで、ウェブサイトの一部の公開領域を独立したページにすることができ、その後、この技術...

CSS3 を使用したテキスト折り紙効果のサンプルコード

序文この記事では主に、CSS3 を使用してテキスト折り紙効果を実現する例を紹介します。これは、参考と...

Docker-compose を使用して GitLab をデプロイする方法

Docker-compose は GitLab をデプロイします1. Dockerをインストールする...

MySQL サーバー 5.7.20 のインストールと設定方法のグラフィック チュートリアル

この記事ではMySQL 5.7.20のインストールと設定方法を記録し、皆さんと共有します1. MyS...

テーブルの最大幅と最小幅を設定する際の互換性の問題と解決策の詳細な説明

テーブル内の min-width と max-width プロパティの設定 <テーブル>...

mysql57サービスが突然消えた問題をすぐに解決する

1つ、 G:\MySQL\MySQL Server 5.7\bin> mysqld --ini...

MySQLへのJava接続の基礎となるカプセル化の詳細な説明

この記事では、Java接続MySQLの基礎となるカプセル化コードを参考までに紹介します。具体的な内容...

JS でパブリッシュ サブスクライブ モデルを作成する

目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...