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 で遅いクエリ SQL を見つけて最適化する詳細な例

目次1. 遅いクエリSQLを見つけて最適化する方法a. スローログに基づいてスロークエリSQLを見つ...

JavaScript の基本演算子

目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...

JS オブジェクトのコピー (ディープ コピーとシャロー コピー)

目次1. 浅いコピー1. Object.assign(ターゲット、ソース、ソース...) 2. スプ...

Vue のドロップダウン ボックスのセカンダリ リンク効果を実装するためのサンプル コード

1. 成果を達成する 2. バックエンドから返されるデータ形式 「リスト」: [ { "i...

Centos8で静的IPを設定する方法の詳細な説明

CentOS 8をインストールした後、ネットワークを再起動すると次のエラーが表示されますエラーメッセ...

CSS スタイルの読み込みの優先順位に関する経験の共有

昨日のプロジェクト開発中に、スタイルの読み込み優先順位に関する問題が発生しました。クラスは定義され、...

Linux システムでのユーザー管理の概要

目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...

コードブロックのハイライトをコピーして表示できる js プラグイン highlight.js + clipboard.js 統合

主に2つの側面から: 1. ハイライト/改行2. コードのコピーボタンこれら両方には既製のプラグイン...

フォーム入力ボックスに関するWebデザインのヒント

この記事では、Web デザインにおけるフォーム入力ボックスに関するヒントとコードをいくつか紹介します...

MySQL では UTF-8 が推奨されないのはなぜですか?

最近、Rails 経由で「utf8」でエンコードされた UTF-8 文字列を MariaDB に保存...

優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス

ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...

Vueはシンプルなマーキー効果を実装します

この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...

Mysql での結合操作

結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...

Node.jsがES6モジュールを処理する方法の詳細な説明

目次1. 2つのモジュールの違い2. Node.jsとの違い3. CommonJSモジュールの読み込...

ルート権限なしでログインするためのDockerソリューション

docker コマンドを初めて使用する場合、権限の問題を確認するメッセージが表示されます。 unix...