この記事では、大画面スクロール効果を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ソフトウェア テスト - MySQL (VI: データベース関数)
>>: SpringBootはActiviti7実装コードを統合する
1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...
実際、XHTML 1.0 は、Transitional DOCTYPE と Strict DOCTY...
MTR は Mini-Transaction の略です。名前が示すように、これは「最小のトランザクシ...
JSを使用して、参考用の簡単な計算機を完成させます。具体的な内容は次のとおりです。要件: 入力値は数...
実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...
nohup コマンドUnix/Linux を使用する場合、通常はプログラムをバックグラウンドで実行す...
コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...
この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...
これまでのブログ投稿では、HTML 5 ではあまり使われていないが注目すべき API やヒントに焦点...
MySQL サービスを使用する場合、通常の状況では、MySQL のタイムアウト設定は 8 時間 (2...
目次MySQL 複数インスタンスマルチインスタンスの概要マルチインスタンスとは何ですか?複数のインス...
本番環境におけるコンテナの稼働状況を監視することは非常に重要です。監視を通じて、コンテナの稼働状況を...
非常に便利な機能group_concat() について、マニュアルには次のように記載されています: ...
Windows サーバーでデータベース データを定期的にバックアップする場合は、Windows タス...
目次序文使用コンポーネントの記述データ構造分析プロセス分析基礎コードの分析他の要約する序文パスワード...