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 を応援していただければ幸いです。

以下もご興味があるかもしれません: