JQuery-Maus über das Bild, um den Text umzukehren

Mit der Entwicklung von Webseiten sind dynamische Effekte zu einem wichtigen Bestandteil des Designs geworden, und unter diesen Effekten ist der Effekt des abwechselnden Erscheinens von Bildern und Text besonders häufig. In diesem Artikel wird eine jQuery-basierte Implementierungsmethode zum Umkehren von Text auf Mouseover-Bildern vorgestellt.

1. Implementierungsprinzip

Platzieren Sie Bilder und Text im selben Elementcontainer und erreichen Sie eine alternative Anzeige von Bildern und Text durch die Steuerung von CSS-Stilen. Wenn Sie mit der Maus darüber fahren, wird jqury verwendet, um die Bilder und Texte im Container umzukehren und den CSS-Stil zu ändern, um dynamische Effekte zu erzielen.

2. Implementierungsschritte

1. Erstellen Sie eine HTML-Struktur

Erstellen Sie zunächst einen HTML-Container mit Bildern und Text. Der Code lautet wie folgt: #🎜 🎜#

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

2. CSS-Stilanpassung

Stellen Sie den Containerstil auf relative Positionierung ein, stellen Sie den Bild- und Textstil auf absolute Positionierung ein und steuern Sie die Anzeigepriorität über den Z-Index Attribut. Der Code lautet wie folgt:

.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. Um den Umkehreffekt zu erzielen

Wenn die Maus im Container bleibt, werden Bild und Text umgekehrt, die Transparenz des Bildes verringert und die Transparenz des Textes erhöht. Um diesen Effekt über jQuery zu erzielen, lautet der Code wie folgt:

$(".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. Der endgültige Effekt

Der vollständige Code lautet wie folgt:

<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);
})

#🎜🎜 #Der Effekt ist wie im Bild gezeigt:

3. Zusammenfassung

In diesem Artikel wird eine jQuery-basierte Implementierungsmethode vorgestellt Möglichkeit, Text umzukehren, wenn die Maus über das Bild fährt. Steuern Sie CSS-Stile und dynamische jQuery-Anpassungen, um dynamische Effekte zu erzielen. Dies ist eine gängige Implementierungsmethode zum Kombinieren von Bildern und Text, die auf verschiedene Webdesigns angewendet werden kann.

Das obige ist der detaillierte Inhalt vonJQuery-Maus über das Bild, um den Text umzukehren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!