HTML、CSS、jQuery を使用してシームレスなスクロール ニュース通知を実現する方法

HTML、CSS、jQuery を使用してシームレスなスクロール ニュース通知を実装する方法

今日の情報爆発の時代において、ニュース通知は人々にとって重要な手段の 1 つとなっています。瞬時に情報を入手すること。 Web ページ上のニュース通知バーはユーザーの注意を引き、重要で興味深いコンテンツを提供します。この記事では、HTML、CSS、jQuery を使用してシームレスにスクロールするニュース通知バーを実装する方法を、具体的なコード例とともに紹介します。

1. HTML 構造:

HTML ファイルでは、まずニュース通知を含むコンテナを作成する必要があります。

<div class="news-container">
  <ul class="news-list">
    <li><a href="#">这是第一条新闻通知</a></li>
    <li><a href="#">这是第二条新闻通知</a></li>
    <li><a href="#">这是第三条新闻通知</a></li>
    <!-- 其他新闻通知... -->
  </ul>
</div>

上記のコードでは、ニュース通知コンテナとして div 要素を使用し、div に ul リストをネストします。各ニュース通知は li タグで囲まれており、リンク <a> を追加できます。

2. CSS スタイル:

シームレスなスクロール効果を実現するには、ニュース通知コンテナーとニュース リストにいくつかの基本的な CSS スタイルを設定する必要があります。

.news-container {
  overflow: hidden;
}
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

.news-list li {
  display: inline-block;
  margin-right: 20px;
  padding: 10px;
  background-color: #f4f4f4;
  border-radius: 5px;
}

上記のコードでは、ニュース通知コンテナの overflow プロパティを hidden に設定して、コンテンツのオーバーフロー部分を非表示にします。

3. jQuery スクロール効果:

jQuery ライブラリを使用すると、スクロール効果を実現するために使用するコードを簡素化できます。以下は、jQuery を使用したシームレスなスクロールのコード例です。

$(function() {
  function scrollNews() {
    $('.news-list li:first').slideUp(function() {
      $(this).appendTo($('.news-list')).slideDown();
    });
  }

  setInterval(scrollNews, 3000); // 每隔3秒滚动一次
});

上記のコードでは、まず scrollNews 関数を定義します。この関数では、slideUp と slideDown を使用してスクロール効果を実現します。機能。 slideUp最初のニュース通知を上にスライドし、appendTo 関数を使用してリストの最後に追加し、slideDown を使用して新しいニュース通知を表示します。

最後に、setInterval 関数を使用して scrollNews 関数を定期的に呼び出し、自動スクロール効果を実現します。上の例では、設定は 3 秒ごとにスクロールしますが、ニーズに合わせて調整できます。

4. 完全なサンプル コード:

以下は、上記のコードの完全な例であり、これを直接コピーして HTML ファイルに貼り付け、効果を確認できます。

<title>无缝滚动的新闻通知</title>
<style>
.news-container {
  overflow: hidden;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

.news-list li {
  display: inline-block;
  margin-right: 20px;
  padding: 10px;
  background-color: #f4f4f4;
  border-radius: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function() {
  function scrollNews() {
    $('.news-list li:first').slideUp(function() {
      $(this).appendTo($('.news-list')).slideDown();
    });
  }

  setInterval(scrollNews, 3000); // 每隔3秒滚动一次
});
</script>


<div class="news-container">
  <ul class="news-list">
    <li><a href="#">这是第一条新闻通知</a></li>
    <li><a href="#">这是第二条新闻通知</a></li>
    <li><a href="#">这是第三条新闻通知</a></li>
    <!-- 其他新闻通知... -->
  </ul>
</div>

この時点で、HTML、CSS、jQuery を使用して、シームレスにスクロールするニュース通知バーを実装しました。実際のニーズに応じてスタイルとコードを調整し、Web サイトのニーズを満たすことができます。この記事がお役に立てば幸いです!

以上がHTML、CSS、jQuery を使用してシームレスなスクロール ニュース通知を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。