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
}]

効果は以下のとおりです