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実装コードを統合する

推薦する

Tcl言語に基づくシンプルなネットワーク環境を構成するプロセスの分析

1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...

XHTML チュートリアル: Transitional と Strict の違い

実際、XHTML 1.0 は、Transitional DOCTYPE と Strict DOCTY...

MySQLにおけるMTRの概念

MTR は Mini-Transaction の略です。名前が示すように、これは「最小のトランザクシ...

JSを使用して簡単な計算機を実装する

JSを使用して、参考用の簡単な計算機を完成させます。具体的な内容は次のとおりです。要件: 入力値は数...

Linux で MySQL のスケジュールバックアップを実装する方法

実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...

Linux nohup コマンドの原理と例の分析

nohup コマンドUnix/Linux を使用する場合、通常はプログラムをバックグラウンドで実行す...

MySQLカバーインデックスの詳しい説明

コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...

HTML5で見逃せないAPIやヒントのまとめ

これまでのブログ投稿では、HTML 5 ではあまり使われていないが注目すべき API やヒントに焦点...

操作タイムアウトがないときにMySQLサーバーがアクティブに切断される問題を解決します

MySQL サービスを使用する場合、通常の状況では、MySQL のタイムアウト設定は 8 時間 (2...

MySQL マルチインスタンス構成のアプリケーションシナリオ

目次MySQL 複数インスタンスマルチインスタンスの概要マルチインスタンスとは何ですか?複数のインス...

Dockerコンテナ監視の原理とcAdvisorのインストールおよび使用方法

本番環境におけるコンテナの稼働状況を監視することは非常に重要です。監視を通じて、コンテナの稼働状況を...

MySQLはgroup_concat()関数に基づいて複数のデータ行を結合します

非常に便利な機能group_concat() について、マニュアルには次のように記載されています: ...

Windows での MySQL スケジュールバックアップ スクリプトの実装

Windows サーバーでデータベース データを定期的にバックアップする場合は、Windows タス...

Reactでパスワード強度検出器を実装する方法

目次序文使用コンポーネントの記述データ構造分析プロセス分析基礎コードの分析他の要約する序文パスワード...