jquery passez la souris sur l'image pour inverser le texte

Avec le développement des pages Web, les effets dynamiques sont devenus un élément important du design, et parmi ces effets, l'effet d'images et de texte apparaissant alternativement est particulièrement courant. Cet article présente une méthode d'implémentation basée sur jQuery pour inverser le texte sur les images survolées par la souris.

1. Principe de mise en œuvre

Placez les images et le texte dans le même conteneur d'éléments et obtenez un affichage alternatif des images et du texte en contrôlant les styles CSS. Lorsque la souris survole, jqury est utilisé pour inverser les images et le texte dans le conteneur et modifier le style CSS pour obtenir des effets dynamiques.

2. Étapes de mise en œuvre

1. Créer une structure HTML

Tout d'abord, créez un conteneur HTML contenant des images et du texte. Le code est le suivant :

<div class="pic-box">
  <img src="/static/imghw/default1.png"  data-src="图片地址"  class="lazy" alt="">
  <div class="text">文字内容</div>
</div>

2. définissez l'image et le style de texte est positionné de manière absolue et la priorité d'affichage est contrôlée via l'attribut z-index. Le code est le suivant :

.pic-box {
  position: relative;
}
.pic-box img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.pic-box .text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: .3s ease;
}

3. Pour obtenir l'effet d'inversion

Lorsque la souris reste sur le conteneur, l'image et le texte sont inversés, la transparence de l'image est réduite et la transparence du texte est augmentée. Pour obtenir cet effet via jQuery, le code est le suivant :

$(".pic-box").hover(function () {
  $(this).find("img").stop().fadeOut(300);
  $(this).find(".text").stop().animate({"opacity": 1}, 300);
}, function () {
  $(this).find("img").stop().fadeIn(300);
  $(this).find(".text").stop().animate({"opacity": 0}, 300);
})

4. L'effet final

Le code complet est le suivant :

<div class="pic-box">
  <img src="/static/imghw/default1.png"  data-src="图片地址"  class="lazy" alt="">
  <div class="text">文字内容</div>
</div>

.pic-box {
  position: relative;
}
.pic-box img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.pic-box .text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: .3s ease;
}

$(".pic-box").hover(function () {
  $(this).find("img").stop().fadeOut(300);
  $(this).find(".text").stop().animate({"opacity": 1}, 300);
}, function () {
  $(this).find("img").stop().fadeIn(300);
  $(this).find(".text").stop().animate({"opacity": 0}, 300);
})

L'effet est comme indiqué dans l'image :

3. Résumé

Cet article présente une méthode basée sur jQuery pour inverser le texte lorsque la souris passe sur une image pour obtenir des effets dynamiques en contrôlant les styles CSS et les ajustements dynamiques jQuery. Il s'agit d'une méthode de mise en œuvre courante consistant à combiner des images et du texte, qui peut être appliquée à diverses conceptions 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!