HTML, CSS et jQuery : créez une belle info-bulle de défilement-js tutoriel-php.cn

HTML, CSS et jQuery : créez une belle info-bulle de défilement

WBOY

Libérer： 2023-10-26 09:47:13

original

935 Les gens l'ont consulté

HTML, CSS et jQuery : créez une belle info-bulle de défilement

HTML, CSS et jQuery : créez une belle boîte d'invite de défilement

Introduction :
Dans la conception et le développement Web, la boîte d'invite de défilement est un composant courant utilisé pour afficher des informations ou des notifications importantes aux utilisateurs. Cet article expliquera comment utiliser HTML, CSS et jQuery pour créer une belle boîte d'invite de défilement et fournira des exemples de code spécifiques.

Étape 1 : Créer une structure HTML

Tout d'abord, nous devons créer une structure HTML de base et donner au composant un identifiant d'identification unique. Le code est le suivant :

<div id="scrolling-box">
  <div id="content">
    <!-- 在此处插入提示内容 -->
  </div>
</div>

Copier après la connexion

Dans la balise

, nous pouvons insérer tout contenu d'invite que nous souhaitons afficher, comme un morceau de texte, une image ou d'autres éléments HTML.

Étape 2 : Définir le style CSS

Ensuite, nous devons définir le style CSS pour embellir la boîte d'invite de défilement. Le style spécifique peut être personnalisé en fonction de vos propres besoins. L'exemple suivant est à titre de référence uniquement :

#scrolling-box {
  width: 400px;
  height: 200px;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scroll 10s linear infinite;
}

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

Copier après la connexion

Dans le code ci-dessus, nous utilisons les propriétés d'animation de CSS pour obtenir l'effet de défilement. Les attributs de transformation de l'état initial et de l'état final sont définis dans l'animation @keyframes, et l'effet de défilement est obtenu en modifiant progressivement le déplacement vertical.

Étape 3 : Ajouter du code jQuery

Enfin, nous utilisons jQuery pour ajouter ou modifier dynamiquement le contenu dans la zone d'invite de défilement. Tout d'abord, nous devons introduire la bibliothèque jQuery, puis écrire le code suivant :

$(document).ready(function() {
  // 添加内容到滚动提示框
  $('#content').append('<p>这是一条示例提示信息。</p>');

  // 修改滚动提示框的样式
  $('#scrolling-box').css('background-color', '#f5f5f5');
});

Copier après la connexion

Dans le code ci-dessus, nous utilisons la fonction .ready() de jQuery pour nous assurer que le document est chargé avant d'exécuter le code. Vous pouvez sélectionner le conteneur de contenu et le conteneur externe de la boîte d'invite de défilement via le sélecteur et utiliser la fonction .append() pour ajouter du contenu et la fonction .css() pour modifier le style.

Résumé :
Grâce à la combinaison de HTML, CSS et jQuery, nous pouvons facilement créer une belle boîte d'invite de défilement. Créez simplement la structure HTML, définissez les styles CSS et utilisez jQuery pour ajouter du contenu et modifier les styles. Dans le développement réel, vous pouvez effectuer des ajustements de style et une extension des fonctions en fonction de vos propres besoins. J'espère que cet article vous aidera à créer une info-bulle de défilement satisfaisante.

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!