Comment créer une barre de notification à défilement réactive en utilisant HTML, CSS et jQuery

Comment utiliser HTML, CSS et jQuery pour créer une barre de notification à défilement réactive

Avec la popularité des appareils mobiles et l'augmentation des exigences des utilisateurs en matière d'expérience d'accès aux sites Web, la conception d'une barre de notification à défilement réactive est devenue de plus en plus importante. . important. La conception réactive garantit que le site Web s'affiche correctement sur différents appareils et que les utilisateurs peuvent facilement visualiser le contenu des notifications. Cet article expliquera comment utiliser HTML, CSS et jQuery pour créer une barre de notification à défilement réactive et fournira des exemples de code spécifiques.

Tout d’abord, nous devons créer la structure HTML. Dans votre fichier HTML, vous pouvez utiliser un élément avec un identifiant pour contenir le contenu de la barre de notification. Par exemple :

<div id="scrolling-news">
  <ul>
    <li>通知内容1</li>
    <li>通知内容2</li>
    <li>通知内容3</li>
    <li>通知内容4</li>
    <li>通知内容5</li>
  </ul>
</div>

Ensuite, nous devons utiliser CSS pour définir le style et la disposition de la barre de notification. Vous pouvez créer un style de base pour la barre de notification en utilisant le style suivant :

#scrolling-news {
  height: 40px;
  overflow: hidden;
}

#scrolling-news ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: scroll 10s linear infinite;
}

#scrolling-news li {
  display: inline-block;
}

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

Dans le code ci-dessus, nous définissons la hauteur de la barre de notification à 40 px et définissons sa propriété de débordement sur masqué pour masquer le contenu hors de portée. Nous utilisons position:relative pour définir la méthode de positionnement de l'élément ul et définissons son style de liste sur none pour supprimer le style de liste par défaut. Nous avons également défini une animation nommée scroll pour faire défiler le contenu de la notification de haut en bas en utilisant transform:translateY().

Maintenant, nous pouvons utiliser jQuery pour ajouter des actions interactives à la barre de notification. Introduisez la bibliothèque jQuery dans votre fichier HTML, puis utilisez le code suivant :

$(document).ready(function() {
  var scrollingNews = $('#scrolling-news');
  var newsItems = scrollingNews.find('li');
  var newsIndex = 0;

  function scrollNews() {
    scrollingNews.find('ul').animate({ marginTop: '-40px' }, 400, function() {
      $(this).css({ marginTop: '0' }).find('li:first').appendTo(this);
    });
  }

  setInterval(scrollNews, 3000);
});

Dans le code ci-dessus, nous utilisons d'abord le sélecteur jQuery pour obtenir les éléments de la barre de notification et le contenu de la notification. Ensuite, nous définissons une fonction appelée scrollNews pour implémenter l'effet de défilement du contenu des notifications. Dans cette fonction, nous utilisons la méthode animate() de jQuery pour faire défiler le contenu de la notification de haut en bas et déplacer le premier élément de notification à la fin de la liste une fois le défilement terminé. Enfin, nous utilisons la méthode setInterval() pour appeler régulièrement la fonction scrollNews afin d'obtenir un effet de défilement automatique.

Maintenant, lorsque vous ouvrez votre page Web, vous devriez voir une barre de notification défilante réactive. Le contenu des notifications défilera de haut en bas à une certaine vitesse, et lorsque de nouvelles notifications seront ajoutées, elles défileront automatiquement.

En utilisant HTML, CSS et jQuery, nous pouvons facilement créer une barre de notification défilante réactive. L'exemple de code ci-dessus n'est qu'une méthode d'implémentation de base. Vous pouvez modifier le style et la mise en page en fonction de vos propres besoins et ajouter des fonctions plus interactives. J'espère que cet article vous sera utile !

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!