HTML, CSS und jQuery: Erstellen Sie ein Bulletin-Board mit automatischem Bildlauf

HTML, CSS und jQuery: Erstellen Sie ein automatisch scrollendes Bulletin Board

Im modernen Webdesign werden Bulletin Boards häufig verwendet, um wichtige Informationen zu übermitteln und die Aufmerksamkeit des Benutzers zu erregen. Auf Webseiten wird häufig ein Bulletin-Board mit automatischem Bildlauf verwendet. Es ermöglicht das Scrollen und Anzeigen des Bulletin-Inhalts auf der Seite, wodurch der Effekt der Informationsanzeige und das Benutzererlebnis verbessert werden. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery ein Bulletin-Board mit automatischem Bildlauf erstellen, und es werden spezifische Codebeispiele bereitgestellt.

Zunächst benötigen wir eine HTML-Struktur zum Speichern des Ankündigungsinhalts. Das Folgende ist ein einfaches HTML-Strukturbeispiel:

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

Im obigen Code verwenden wir ein <ul>-Element, um die Ankündigungsliste zu enthalten, und jede Ankündigung verwendet <li>< /code> Element dargestellt wird. <ul>元素来包含公告列表，每一条公告使用<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()

Als nächstes müssen wir CSS verwenden, um den Stil des Bulletin Boards zu definieren. Das Folgende ist ein Beispiel für einen einfachen CSS-Stil:

rrreee

Im obigen Code legen wir eine feste Breite und Höhe für den Container des Bulletin Boards fest und verwenden overflow: versteckt;, um Inhalte darüber hinaus auszublenden Umfang des Containers. Die Ankündigungsliste verwendet einen ungeordneten Listenstil und der Scrolleffekt wird durch CSS-Animation @keyframes erreicht.

Schließlich müssen wir jQuery verwenden, um das Scrollverhalten des Bulletin Boards zu steuern. Das Folgende ist ein jQuery-basiertes Codebeispiel:

rrreee🎜Im obigen Code ermitteln wir zunächst die Höhe jeder Ankündigung und berechnen die Gesamthöhe der Ankündigungstafel. Anschließend passen wir die Höhe der Ankündigungsliste so an, dass sie alle Ankündigungen vollständig enthält, und initialisieren die Startposition des Scrolls. 🎜🎜Als nächstes definieren wir eine Schleifenfunktion loop(), um das automatische Scrollen des Bulletin Boards zu implementieren. In der Schleifenfunktion verwenden wir die Funktion animate(), um die Scroll-Animation zu implementieren. Nachdem die Animation abgeschlossen ist, verschieben wir die erste Ankündigung an das Ende, um den Effekt eines Endlosschleifen-Scrollens zu erzielen. 🎜🎜Schließlich verwenden wir die Funktion setTimeout(), um die Schleifenfunktion regelmäßig aufzurufen, um ein automatisches Scrollen des Bulletin Boards zu realisieren, und legen das Scrollintervall auf 3 Sekunden fest. 🎜🎜Mit dem oben genannten HTML-, CSS- und jQuery-Code haben wir erfolgreich ein automatisch scrollendes Bulletinboard erstellt. Sie können den obigen Code in Ihre Webseitendatei kopieren und ihn entsprechend den tatsächlichen Anforderungen ändern und anpassen. 🎜🎜Zusammenfassung🎜In diesem Artikel werden die Schritte und spezifischen Codebeispiele zur Verwendung von HTML, CSS und jQuery zum Erstellen eines automatisch scrollenden Bulletin Boards vorgestellt. Durch die richtige Strukturierung von HTML-Inhalten, die Definition von CSS-Stilen und die Verwendung von jQuery zur Steuerung des Scrollverhaltens können wir problemlos ein dynamisches Bulletin Board implementieren, um die Informationspräsentation und das Benutzererlebnis zu verbessern. Ich hoffe, dieser Artikel ist hilfreich für Sie und wünsche Ihnen bessere Ergebnisse beim Webdesign! 🎜

Das obige ist der detaillierte Inhalt vonHTML, CSS und jQuery: Erstellen Sie ein Bulletin-Board mit automatischem Bildlauf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!