jquery erzielt einen Bildverlaufseffekt

WBOY
Freigeben: 2023-05-14 13:22:39
Original
574 Leute haben es durchsucht

Im Webdesign wird der Einsatz von Bildverlaufseffekten immer häufiger eingesetzt. Er kann nicht nur der Webseite Schönheit verleihen, sondern auch die Aufmerksamkeit des Benutzers erregen. Heute werden wir den Bildverlaufseffekt über jQuery implementieren.

Zuerst müssen wir in HTML ein Bild einfügen:

<img src="image.jpg" alt="这是一张图片" id="image">
Nach dem Login kopieren

Dann müssen wir in JavaScript das src-Attribut des Bildes in einer Variablen speichern:

var image = $("#image");
var src = image.attr("src");
Nach dem Login kopieren

Dann setzen wir das src-Attribut des Bildes auf is eine leere Zeichenfolge, sodass das Bild leer erscheint:

image.attr("src", "");
Nach dem Login kopieren

Als nächstes verwenden Sie jQuery, um das Bild vorab zu laden:

$("<img>").attr("src", src).load(function() {
  // 图片加载完成后执行以下代码
  image.fadeOut(function(){
    $(this).attr("src", src).fadeIn();
  });
});
Nach dem Login kopieren

Im obigen Code erstellen wir ein neues img-Tag und setzen die Bildadresse auf die, die wir vor der src-Variablen gespeichert haben. Nachdem das neue Bild geladen wurde, führen wir einen Ausblendeffekt für das Originalbild durch, setzen dann das src-Attribut des neuen Bildes auf die zuvor gespeicherte Bildadresse und verwenden den Einblendeffekt, um das neue Bild langsam erscheinen zu lassen.

Schließlich müssen wir den gesamten Code in $(document).ready() einfügen, um sicherzustellen, dass der Code nach dem Laden des Dokuments ausgeführt werden kann:

$(document).ready(function() {
  var image = $("#image");
  var src = image.attr("src");
  image.attr("src", "");
  $("").attr("src", src).load(function() {
    image.fadeOut(function(){
      $(this).attr("src", src).fadeIn();
    });
  });
});
Nach dem Login kopieren

Durch den obigen Code haben wir jQuery erfolgreich verwendet, um das Bild zu erreichen Farbverlaufseffekt: Machen Sie Webseiten schöner und ziehen Sie die Aufmerksamkeit der Benutzer auf sich.

Das obige ist der detaillierte Inhalt vonjquery erzielt einen Bildverlaufseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!