この記事では、大画面スクロール効果を実現するための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実装コードを統合する
MySQL トランザクション サポートは、MySQL サーバー自体にバインドされているのではなく、ス...
レスポンシブレイアウト開発の基礎知識この章は主に以下の部分に分かれています• レスポンシブデザインを...
水平方向では、テーブル ヘッダーの配置を左、中央、右に設定できます。基本的な構文<TH ALI...
1. 単一行オーバーフロー1. 1 行がオーバーフローした場合、超過部分は表示されます...または、...
最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...
この記事では、カレンダー効果を素早く実現するためのJavaScriptの具体的なコードを例として紹介...
目次1. 理解2. 使用1. h() パラメータ2. 使い方が簡単3. カウンターケースを実装する4...
最近、JS の正規表現マッチングの落とし穴を発見したのですが、その時はあまりにも奇妙だったので、何か...
ページ: ベース: <テンプレート> <div class="タブコンテ...
1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...
ケース1: 最後の提出とプッシュなし次のコマンドを実行します。 git コミット --amend g...
1. プロジェクトwarが保存されているディレクトリを入力しますDockerfileを編集する vi...
2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレー...
Vue プロジェクトの開発プロセスでは、ローカル デバッグの利便性のため、通常、vue.config...
この記事では、Ubuntu 環境で xdebug をコンパイルしてインストールする方法について説明し...