jQueryで大画面スクロール再生効果を実現

jQueryで大画面スクロール再生効果を実現

この記事では、大画面スクロール効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

シナリオの要件:

大画面では、メッセージがリアルタイムで再生され、前後にスクロールします。

コード:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <ヘッド>
        <title>チェックボックスのカスタム スタイル</title>
        <meta name="viewport" content="width=デバイス幅、初期スケール=1">
        <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
        <link rel="スタイルシート" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <スタイル>
            * {
        マージン: 0;
        パディング: 0;
    }
    
    .contScend {
        幅: 400ピクセル;
        高さ: 200px;
        背景: #000000;
        マージン: 20px 自動;
        オーバーフロー: 非表示;
    }
    
    .contScend ul {
        リストスタイル: なし;
        幅: 100%;
        高さ: 100%;
        色:赤;
        フォントサイズ: 13px;
    }
    
    .contScend ul li {
        幅: 100%;
        高さ: 40px;
        ボックスのサイズ: 境界線ボックス;
        行の高さ: 40px;
        テキスト配置: 中央;
    }
 
        </スタイル>
    </head>
    <本文>
        <!-- 中間部分 -->
        <div class="contScend">
 
        </div>
    </本文>
    <script type="text/javascript">
        $.ajax({
            URL: "test.json",
            タイプ: 'GET'、
            データ型: 'json',
            成功: 関数(データ) {
                var html = "";
                html += '<ul>';
                $.each(データ、関数(i、項目) { //                
                    html += '<li>' + item.name + ':' + item.numb + '人' + '</li>';
 
                });
                html += '</ul>';
                $(".contScend").html(html);
                スクロール();
            }
        });
 
        関数スクロール() {
            //現在の <ul> を取得します
            var $uList = $(".contScend ul");
            var タイマー = null;
            // タイマーをクリアするにはタッチします $uList.hover(function() {
                    タイマーの間隔をクリアします。
                },
                function() { //タイマーを開始するには、そのままにしておきます timer = setInterval(function() {
                            スクロールリスト($uList);
                        },
                        1000);
                }).trigger("mouseleave"); //タッチイベントを自動的にトリガーする //スクロールアニメーション関数 scrollList(obj) {
                //現在の <li> の高さを取得します。var scrollHeight = $("ul li:first").height();
                // 高さをスクロールアウトします <li>$uList.stop().animate({
                        マージントップ: -スクロール高さ
                    },
                    600,
                    関数() {
                        //アニメーションが終了したら、現在の <ul>marginTop を初期値 0 に設定し、最初の <li> を最後に接続します。
                        $uList.css({
                            マージン上: 0
                        }).find("li:first").appendTo($uList);
                    });
            }
        }
    </スクリプト>
</html>

テスト.json

[{
    "name": "エクスペリエンスゾーン統計",
    「数値」: 0
}, {
    "名前": "test909",
    「数値」: 0
}, {
    "名前": "test910",
    「数値」: 0
}, {
    "名前": "111",
    「数値」: 0
}, {
    "名前": "テスト",
    「数値」: 0
}, {
    "名前": "test11111",
    「数値」: 0
}, {
    "name": "メモリ領域統計",
    「数値」: 0
}]

効果は以下のとおりです

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery をベースにした歌詞スクロール音楽プレーヤーを実装するためのコード
  • jQuery は画像の左右間隔スクロール効果を実装します (自動再生可能)
  • jQuery フォーカス画像切り替え(デジタルマーキング/手動/自動再生/水平スクロール)
  • jQueryはメッセージのスクロール効果を実現します

<<:  ソフトウェア テスト - MySQL (VI: データベース関数)

>>:  SpringBootはActiviti7実装コードを統合する

推薦する

MySQLトランザクション処理の使用方法とサンプルコードの詳細な説明

MySQL トランザクション サポートは、MySQL サーバー自体にバインドされているのではなく、ス...

レスポンシブレイアウトの概要(推奨)

レスポンシブレイアウト開発の基礎知識この章は主に以下の部分に分かれています• レスポンシブデザインを...

HTML テーブル マークアップ チュートリアル (42): テーブル ヘッダーの水平方向の配置属性 ALIGN

水平方向では、テーブル ヘッダーの配置を左、中央、右に設定できます。基本的な構文<TH ALI...

1 行または複数行のテキストがオーバーフローしたときに省略記号を表示する CSS を実装する方法

1. 単一行オーバーフロー1. 1 行がオーバーフローした場合、超過部分は表示されます...または、...

MySQL 8.0.23 無料インストールバージョンの設定詳細チュートリアル

最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...

JavaScriptでカレンダー効果を素早く実装

この記事では、カレンダー効果を素早く実現するためのJavaScriptの具体的なコードを例として紹介...

Vue h関数の使い方の詳しい説明

目次1. 理解2. 使用1. h() パラメータ2. 使い方が簡単3. カウンターケースを実装する4...

JS 正規マッチングの落とし穴の記録

最近、JS の正規表現マッチングの落とし穴を発見したのですが、その時はあまりにも奇妙だったので、何か...

子コンポーネントで vue activated を使用する詳細

ページ: ベース: <テンプレート> <div class="タブコンテ...

wavesurfer.js によるオーディオ波形描画の実装

1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...

Gitコミットログの変更方法のまとめ

ケース1: 最後の提出とプッシュなし次のコマンドを実行します。 git コミット --amend g...

Dockerでプロジェクトを実行する方法

1. プロジェクトwarが保存されているディレクトリを入力しますDockerfileを編集する vi...

Mysql トランザクションで Update を実行するとテーブルがロックされますか?

2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレー...

Vue プロジェクトを使用して複数のプロキシを構成する際の注意事項

Vue プロジェクトの開発プロセスでは、ローカル デバッグの利便性のため、通常、vue.config...

Ubuntu環境でxdebugをコンパイルしてインストールする方法

この記事では、Ubuntu 環境で xdebug をコンパイルしてインストールする方法について説明し...