この記事では、オンラインアナウンスのスクロール効果を実現するための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
状況の説明:今日、MySQL データベースのスレーブ ノード ホストにログインしたところ、/var/...
目次1. HTMLを書く、最初のVueプログラムビューテンプレートとデータに注意してください決定ルー...
目次1. はじめに2. ポイントフィーチャーレイヤーの集約3. 重合の特殊処理4. 重合の特殊処理 ...
成果を達成するコードは次のとおりですhtml <テンプレート> <div> ...
1. ユーザーを作成して承認するMySQL 8.0 では、ユーザーの作成と認証が以前とは異なります...
目次Vuex環境を構築する要約するVuex環境を構築するsrcディレクトリにフォルダstoreを作成...
目次1. コンポーネントの登録2. コンポーネントの使用3. 父から息子へ4. 息子から父へ5. ス...
この記事では、シャトルボックス機能を実現するためのjQueryの具体的なコードを参考までに紹介します...
目次序文XA プロトコルMySQL XA で分散トランザクションを実装する方法序文MySQL が単一...
導入JavaScript はデフォルトでシングルスレッドであるため、コードは並列実行するための新しい...
目次1. テンプレート文字列とは何ですか? 2. 複数行のテンプレート文字列2.1 式付きテンプレー...
キーコードは次のとおりです。コードをコピーコードは次のとおりです。 html{高さ:100%; }コ...
DockerイメージからDockerfileを取得する docker 履歴 --format {{....
will-change は、要素にどのような変更が行われるかをブラウザに伝え、ブラウザが事前に最適化...
この記事では、MySQL 8.0.13のインストールと設定のチュートリアルを参考までに紹介します。具...