jquery change le texte en photo

Avec le développement d'Internet et de la technologie mobile, les effets dynamiques sont devenus une direction importante dans le développement Web. Ici, nous allons présenter comment utiliser jQuery pour transformer du texte en photos.

Dans la conception de sites Web, le texte et les images sont des éléments très importants. Ils peuvent aider les sites Web à améliorer l’expérience utilisateur et à accroître l’attrait des pages. Traditionnellement, le texte et les images existent indépendamment, mais nous pouvons utiliser certaines techniques pour les combiner afin d'obtenir un effet plus vivant et plus intéressant.

L'effet texte en photo peut être utilisé dans les présentations de produits, les publicités sur des sites Web, les présentations de voyages, etc. Lorsque l'utilisateur survole le texte, celui-ci se transforme en photo, attirant l'attention de l'utilisateur. Cet effet augmente non seulement la beauté de la page, mais permet également aux utilisateurs de mieux comprendre le produit ou le service.

Et jQuery est une bibliothèque JavaScript très puissante qui peut nous aider à écrire rapidement des scripts js pour obtenir une variété d'effets dynamiques. Ici, nous allons présenter comment utiliser jQuery pour transformer du texte en photos.

Idées de mise en œuvre

Tout d'abord, nous devons clarifier l'idée de base pour​​obtenir cet effet. Lorsque l'utilisateur passe la souris sur le texte spécifié, nous devons le remplacer progressivement par une image. Plus précisément, nous pouvons utiliser les méthodes suivantes :

1. Tout d'abord, nous devons prédéfinir les codes correspondant au texte et aux images dans le fichier HTML, ce qui peut réduire la complexité du script.
2. Lorsque l'utilisateur passe la souris sur le texte spécifié, nous devons utiliser l'événement mouseover de jQuery pour déclencher le script.
3. Dans le script, nous devons remplacer progressivement le contenu du texte par des images, ce qui peut être réalisé en changeant progressivement le style du texte.
4. Enfin, lorsque la souris quitte le texte, nous devons restaurer le contenu du texte dans son style d'origine.

Détails de mise en œuvre

Ensuite, nous présenterons étape par étape comment utiliser jQuery pour obtenir l'effet de transformer du texte en photos.

1. Définir la structure HTML

Tout d'abord, en HTML, nous devons prédéfinir le texte qui doit être remplacé et les images correspondantes. Le code est le suivant :

<p class="text">这是一段需要替换的文字。</p>
<img class="image" src="image.jpg" alt="这是一张图片。" style="display: none;">

Ici, nous intégrons "Ceci est un paragraphe de texte qui doit être remplacé." dans un paragraphe, puis définissons le chemin de l'image correspondant dans l'élément image.

Il convient de noter ici qu'en plus de l'élément de texte intégré, nous devons également définir un élément d'image. Le but est de pouvoir changer progressivement son style dans le script, et finalement obtenir l'effet de transformer le texte en photos.

2. Style CSS de conception

Ensuite, nous devons définir le style CSS, qui peut fournir la prise en charge de style nécessaire pour le script. Le code est le suivant :

<style>
.text {
  position: relative;
  z-index: 1;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
}
</style>

Ici, nous définissons l'élément texte sur un positionnement relatif (position : relative ;), puis définissons son niveau sur 1 (z-index : 1 ;). remplace le texte, Le texte apparaît au-dessus de l'image.

L'élément image est défini sur un positionnement absolu (position : absolue ;) et son niveau est défini sur 0 (z-index : 0 ;), ce qui garantit que l'image est affichée sous le texte. De plus, nous réglons la transparence de l'image à 0 (opacité : 0 ;) pour qu'elle émerge progressivement.

3. Écrire des scripts jQuery

Ensuite, nous devons utiliser l'événement mouseover (mouseover) et l'événement mouseout (mouseout) de jQuery pour écrire le script. Le code est le suivant :

<script>
$(function() {
  $('.text').mouseover(function() {
    $(this).addClass('active');
  }).mouseout(function() {
    $(this).removeClass('active');
  });
  
  $('.text.active').each(function() {
    var text = $(this).text();
    var image = $(this).next('.image');
    var opacity = 0;
    var timer = setInterval(function() {
      $(this).css('opacity', opacity);
      opacity += 0.1;
      if (opacity >= 1) {
        clearInterval(timer);
        $(this).text('');
        $(this).prev('.text').hide();
      }
    }.bind(image), 50);
  });
});
</script>

Ici, nous enregistrons d'abord l'événement mouseover (mouseover) et l'événement mouseout (mouseout) dans l'événement document.ready().

Lorsque la souris survole le texte, nous ajouterons une classe .active, qui peut fournir les conditions nécessaires aux changements de style.

Lorsque la souris sort du texte, nous supprimerons la classe .active pour restaurer le style original du texte.

Ensuite, nous utilisons la méthode each() de jQuery pour parcourir tous les éléments de texte portant le nom de classe .active. Pour chaque élément de texte, nous obtiendrons son contenu textuel et l'élément d'image correspondant, et définirons une minuterie pour afficher progressivement l'image.

Dans le minuteur, nous allons modifier la transparence de l'élément image, masquer l'élément texte, supprimer le contenu du texte et enfin afficher l'élément image en fonction du changement de transparence.

4. Code complet

Enfin, nous intégrons les trois aspects du code ci-dessus pour former un fichier HTML complet. Le code est le suivant :

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery实现文字变照片</title>
  <style>
    .text {
      position: relative;
      z-index: 1;
    }

    .image {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      opacity: 0;
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('.text').mouseover(function() {
        $(this).addClass('active');
      }).mouseout(function() {
        $(this).removeClass('active');
      });
      
      $('.text.active').each(function() {
        var text = $(this).text();
        var image = $(this).next('.image');
        var opacity = 0;
        var timer = setInterval(function() {
          $(this).css('opacity', opacity);
          opacity += 0.1;
          if (opacity >= 1) {
            clearInterval(timer);
            $(this).text('');
            $(this).prev('.text').hide();
          }
        }.bind(image), 50);
      });
    });
  </script>
</head>
<body>
  <p class="text">这是一段需要替换的文字。</p>
  <img class="image" src="image.jpg" alt="这是一张图片。" style="display: none;">
</body>
</html>

Ce fichier HTML comprend trois parties : définir la structure HTML, concevoir les styles CSS et écrire des scripts jQuery, qui peuvent obtenir l'effet de transformer du texte en photos.

Résumé

Dans cet article, nous avons présenté comment utiliser jQuery pour transformer du texte en photos. En prédéfinissant la structure HTML, en concevant des styles CSS et en écrivant des scripts jQuery, nous pouvons rapidement obtenir cet effet, améliorant ainsi l'attrait de la page et l'expérience utilisateur. Dans le même temps, cela démontre également les avantages de jQuery dans les opérations DOM et les effets dynamiques.

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!