HTML, CSS et jQuery : créez un tableau d'affichage à défilement automatique

HTML, CSS et jQuery : créez un tableau d'affichage à défilement automatique

Dans la conception Web moderne, les tableaux d'affichage sont souvent utilisés pour transmettre des informations importantes et attirer l'attention des utilisateurs. Un tableau d'affichage à défilement automatique est largement utilisé sur les pages Web. Il permet au contenu du bulletin de défiler et de s'afficher sur la page sous forme d'animation, améliorant ainsi l'effet d'affichage des informations et l'expérience utilisateur. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un tableau d'affichage à défilement automatique et fournit des exemples de code spécifiques.

Tout d'abord, nous avons besoin d'une structure HTML pour stocker le contenu de l'annonce. Ce qui suit est un exemple simple de structure HTML :

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

Dans le code ci-dessus, nous utilisons un élément <ul></ul> pour contenir la liste d'annonces, et chaque annonce utilise <li> est représenté. <ul></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()

Ensuite, nous devons utiliser CSS pour définir le style du babillard. Ce qui suit est un exemple de style CSS de base :

rrreee

Dans le code ci-dessus, nous définissons une largeur et une hauteur fixes pour le conteneur du tableau d'affichage et utilisons overflow: Hidden; pour masquer le contenu au-delà de la portée de le conteneur. La liste d'annonces utilise un style de liste non ordonné et l'effet de défilement est obtenu grâce à l'animation CSS @keyframes.

Enfin, nous devons utiliser jQuery pour contrôler le comportement de défilement du babillard. Voici un exemple de code basé sur jQuery :

rrreee🎜Dans le code ci-dessus, nous obtenons d'abord la hauteur de chaque annonce et calculons la hauteur totale du tableau d'annonces. On ajuste ensuite la hauteur de la liste d'annonces pour qu'elle contienne entièrement toutes les annonces, et on initialise la position de départ du scroll. 🎜🎜Ensuite, nous définissons une fonction de boucle loop() pour implémenter le défilement automatique du babillard. Dans la fonction de boucle, nous utilisons la fonction animate() pour implémenter l'animation de défilement, et une fois l'animation terminée, déplaçons la première annonce vers la fin pour obtenir l'effet de défilement en boucle infinie. 🎜🎜Enfin, nous utilisons la fonction setTimeout() pour appeler régulièrement la fonction de boucle afin de réaliser le défilement automatique du tableau d'affichage et définir l'intervalle de défilement à 3 secondes. 🎜🎜Avec le code HTML, CSS et jQuery ci-dessus, nous avons réussi à créer un tableau d'affichage à défilement automatique. Vous pouvez copier le code ci-dessus dans le fichier de votre page Web et le modifier et le personnaliser en fonction des besoins réels. 🎜🎜Résumé🎜Cet article présente les étapes et des exemples de code spécifiques pour utiliser HTML, CSS et jQuery pour créer un tableau d'affichage à défilement automatique. En structurant correctement le contenu HTML, en définissant les styles CSS et en utilisant jQuery pour contrôler le comportement de défilement, nous pouvons facilement mettre en œuvre un tableau d'affichage dynamique pour améliorer la présentation des informations et l'expérience utilisateur. J'espère que cet article vous sera utile et je vous souhaite de meilleurs résultats en matière de conception de sites Web ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!