JSはオンラインでのアナウンスのスクロール効果を実現します

JSはオンラインでのアナウンスのスクロール効果を実現します

この記事では、オンラインアナウンスのスクロール効果を実現するための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
  • JavaScript(jQuery ベース)で実装されたスクロールアナウンス効果
  • アナウンスのスクロール効果を実現するネイティブ js
  • 10行のjsコードを使用して、アナウンスを上下にスクロールする効果を実現します。
  • js シームレス上方スクロール、ウェブサイトアナウンス効果特定コード

<<:  Vuexはシンプルなショッピングカートを実装します

>>:  モバイルの赤い封筒の雨機能ページを実装するための JavaScript HTML

推薦する

MySQLスレーブライブラリの復元の実践記録

状況の説明:今日、MySQL データベースのスレーブ ノード ホストにログインしたところ、/var/...

Vueの最初のプログラムを書くための勉強ノート

目次1. HTMLを書く、最初のVueプログラムビューテンプレートとデータに注意してください決定ルー...

OpenLayersはポイントフィーチャーレイヤーの集約表示方法を実現します

目次1. はじめに2. ポイントフィーチャーレイヤーの集約3. 重合の特殊処理4. 重合の特殊処理 ...

Vue プロジェクトは左スワイプ削除機能を実装します (完全なコード)

成果を達成するコードは次のとおりですhtml <テンプレート> <div> ...

MySQL 8.0 の新機能の落とし穴と解決策についての簡単な説明 (要約)

1. ユーザーを作成して承認するMySQL 8.0 では、ユーザーの作成と認証が以前とは異なります...

Vuex環境の詳細な説明

目次Vuex環境を構築する要約するVuex環境を構築するsrcディレクトリにフォルダstoreを作成...

Vueのコンポーネントの詳細な説明

目次1. コンポーネントの登録2. コンポーネントの使用3. 父から息子へ4. 息子から父へ5. ス...

jQueryはシャトルボックス機能を実現する

この記事では、シャトルボックス機能を実現するためのjQueryの具体的なコードを参考までに紹介します...

MySQL XA で分散トランザクションを実装する方法

目次序文XA プロトコルMySQL XA で分散トランザクションを実装する方法序文MySQL が単一...

Node.js における非同期プログラミングの知識ポイントの詳細な説明

導入JavaScript はデフォルトでシングルスレッドであるため、コードは並列実行するための新しい...

JS ES 新機能テンプレート文字列

目次1. テンプレート文字列とは何ですか? 2. 複数行のテンプレート文字列2.1 式付きテンプレー...

さまざまな解像度やブラウザでウェブページを適切に表示する方法

キーコードは次のとおりです。コードをコピーコードは次のとおりです。 html{高さ:100%; }コ...

docker ポートを追加して dockerfile を取得する方法

DockerイメージからDockerfileを取得する docker 履歴 --format {{....

CSS パフォーマンスの最適化 - will-change の使用方法の詳細な説明

will-change は、要素にどのような変更が行われるかをブラウザに伝え、ブラウザが事前に最適化...

MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.13のインストールと設定のチュートリアルを参考までに紹介します。具...