HTML、CSS、jQuery: 自動スクロール掲示板を作成する

HTML、CSS、jQuery: 自動スクロール掲示板を作成する

現代の Web デザインでは、掲示板は重要な情報を伝え、ユーザーを引き付けるためによく使用されます。自動スクロール掲示板は、Web ページ上で広く使用されており、掲示板のコンテンツがページ上でスクロールしてアニメーション形式で表示され、情報の表示効果とユーザー エクスペリエンスが向上します。この記事ではHTML、CSS、jQueryを使って自動スクロール掲示板を作る方法と具体的なコード例を紹介します。

まず、お知らせのコンテンツを保存するための HTML 構造が必要です。以下は、単純な HTML 構造の例です。

<div class="notice-board">
  <ul class="notice-list">
    <li>这是第一条公告</li>
    <li>这是第二条公告</li>
    <li>这是第三条公告</li>
    <li>这是第四条公告</li>
  </ul>
</div>

上記のコードでは、<ul> 要素を使用してお知らせのリストを含めており、各お知らせでは &lt を使用しています。 ;li> ; 要素が表現されます。

次に、CSS を使用して掲示板のスタイルを定義する必要があります。以下は、基本的な CSS スタイルの例です。

.notice-board {
  width: 300px;
  height: 100px;
  overflow: hidden;
}

.notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  animation: scroll 10s infinite;
  animation-timing-function: linear;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  
  100% {
    transform: translateY(-100%);
  }
}

上記のコードでは、掲示板コンテナーに固定の幅と高さを設定し、overflow: hidden; を使用して掲示板の向こう側を非表示にします。コンテナ 範囲の内容。アナウンス リストは順序なしリスト スタイルを使用し、スクロール効果は CSS アニメーション@keyframes によって実現されます。

最後に、jQuery を使用して掲示板のスクロール動作を制御する必要があります。以下は、jQuery ベースのコード例です。

$(document).ready(function() {
  var noticeHeight = $('.notice-list li').outerHeight();
  var noticeNumber = $('.notice-list li').length;
  var totalHeight = noticeHeight * noticeNumber;

  $('.notice-list').css('height', totalHeight + 'px');

  function loop() {
    $('.notice-list').animate({
      top: -noticeHeight
    }, 500, function() {
      $('.notice-list li:first').appendTo('.notice-list');
      $('.notice-list').css('top', '0');
    });

    setTimeout(loop, 3000);
  }

  loop();
});

上記のコードでは、まず各アナウンスの高さを取得し、アナウンス ボードの合計の高さを計算します。次に、すべてのアナウンスが完全に含まれるようにアナウンス リストの高さを調整し、スクロールの開始位置を初期化します。

次に、掲示板の自動スクロールを実装するためのループ関数 loop() を定義します。ループ関数では、animate() 関数を使用してスクロール アニメーションを実装し、アニメーションが完了した後、最初のアナウンスを最後に移動して、無限ループ スクロールの効果を実現します。

最後に、setTimeout() 関数を使用して定期的にループ関数を呼び出し、掲示板の自動スクロールを実現し、スクロール間隔を 3 秒に設定します。

上記の HTML、CSS、jQuery コードを使用して、自動スクロール掲示板を作成することに成功しました。上記のコードを Web ページ ファイルにコピーし、実際のニーズに応じて変更およびカスタマイズできます。

概要
この記事では、HTML、CSS、jQuery を使用して自動スクロール掲示板を作成する手順と具体的なコード例を紹介します。 HTML コンテンツを適切に構造化し、CSS スタイルを定義し、jQuery を使用してスクロール動作を制御することで、動的な掲示板を簡単に実装して、情報の表示とユーザー エクスペリエンスを向上させることができます。この記事があなたのお役に立てば幸いです。また、Web デザインでより良い結果が得られることを願っています。

以上がHTML、CSS、jQuery: 自動スクロール掲示板を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。