この記事では、オンラインアナウンスのスクロール効果を実現するためのJSの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 実現される効果は次のとおりです。ニュースのアナウンスが上下にスクロールします。 コード: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script> <script src="./l-by-l.min.js"></script> <title>ドキュメント</title> <スタイル> * { パディング: 0; マージン: 0; ボックスのサイズ: 境界線ボックス; } .お知らせニュース{ 幅: 400ピクセル; 高さ: 30px; 背景色: #fff; 境界線: 1px 実線 #ccc; マージン: 20px; 境界線の半径: 8px; ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 パディング: 0 10px; オーバーフロー: 非表示; } .hron-voice { 幅: 16px; 高さ: 16px; 背景画像: url('./horn.png'); 背景繰り返し: 繰り返しなし; 背景サイズ: 100% 100%; } .ニュースリスト{ リストスタイル: なし; 幅: 320ピクセル; 高さ: 18px; フォントサイズ: 12px; 左マージン: 10px; オーバーフロー: 非表示; /* 遷移: すべて .5 秒線形; */ } .ニュースリスト li { 幅: 100%; オーバーフロー: 非表示; 空白: ラップなし; テキストオーバーフロー: 省略記号; } </スタイル> </head> <本文> <div class="お知らせニュース"> <div class="hron-voice"></div> <ul class="ニュースリスト"> <li>HTML はハイパーテキスト マークアップ言語と呼ばれ、識別言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 </li> <li>JavaScript (略して「JS」) は、関数ファーストのアプローチを採用した、軽量で解釈型またはジャストインタイムコンパイル型の高水準プログラミング言語です。 </li> <li>カスケーディング スタイル シート (正式名称: Cascading Style Sheets) は、HTML (Standard Generalized Markup Language のアプリケーション) や XML (Standard Generalized Markup Language のサブセット) などのファイルのスタイルを表現するために使用されるコンピュータ言語です。 </li> <li>Node.js は、Chrome V8 エンジンをベースにした JavaScript ランタイム環境です。 Node.js は、イベント駆動型の非ブロッキング I/O モデルを使用します。 </li> </ul> </div> </本文> <script type="text/javascript"> $(関数() { setInterval(関数() { $('.news-list').animate({ 上マージン: '-50px' }, 2000, 関数(){ $(this).css({ marginTop: "0px" }); var li = $(".news-list").children().first().clone() $(".news-list li:last").after(li); $(".news-list li:first").remove(); }) }, 3000) }) </スクリプト> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: モバイルの赤い封筒の雨機能ページを実装するための JavaScript HTML
目次1. 遅いクエリSQLを見つけて最適化する方法a. スローログに基づいてスロークエリSQLを見つ...
目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...
目次1. 浅いコピー1. Object.assign(ターゲット、ソース、ソース...) 2. スプ...
1. 成果を達成する 2. バックエンドから返されるデータ形式 「リスト」: [ { "i...
CentOS 8をインストールした後、ネットワークを再起動すると次のエラーが表示されますエラーメッセ...
昨日のプロジェクト開発中に、スタイルの読み込み優先順位に関する問題が発生しました。クラスは定義され、...
目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...
主に2つの側面から: 1. ハイライト/改行2. コードのコピーボタンこれら両方には既製のプラグイン...
この記事では、Web デザインにおけるフォーム入力ボックスに関するヒントとコードをいくつか紹介します...
最近、Rails 経由で「utf8」でエンコードされた UTF-8 文字列を MariaDB に保存...
ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...
この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...
結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...
目次1. 2つのモジュールの違い2. Node.jsとの違い3. CommonJSモジュールの読み込...
docker コマンドを初めて使用する場合、権限の問題を確認するメッセージが表示されます。 unix...