Cara Memudarkan Imej Latar Belakang dengan jQuery Menggunakan Elemen HTML

Imej Latar Belakang Pudar dengan jQuery

Imej latar belakang ialah cara biasa untuk menambah minat visual pada halaman web atau apl. Walau bagaimanapun, anda mungkin mahu beralih antara berbilang imej latar belakang untuk mencipta kesan dinamik.

Secara tradisinya, fungsi fadeIn dan fadeOut jQuery hanya berfungsi pada elemen dengan warna latar belakang. Ini memberikan cabaran apabila cuba memudarkan imej latar belakang tanpa mencipta elemen HTML baharu untuk setiap imej.

Penyelesaian:

Untuk mengatasi had ini, penyelesaian yang biasa adalah dengan menggunakan tag untuk imej anda dan sembunyikannya pada mulanya menggunakan display:none. Dengan meletakkan imej secara mutlak, dengan indeks z negatif, anda boleh menjadikannya berkelakuan seperti latar belakang. Berikut ialah penyelesaian langkah demi langkah:

1. Tukar imej latar belakang anda kepada tag:

   <code class="html"><img src="image1.jpg" />
   <img src="image2.jpg" /></code>

2. Gayakan imej menggunakan CSS:

   <code class="css">img {
     position: absolute;
     z-index: -1;
     display: none;
   }</code>

3. Gunakan jQuery untuk memudarkan imej masuk dan keluar:

   <code class="javascript">function test() {
     $("img").each(function(index) {
    $(this).hide();
    $(this).delay(3000 * index).fadeIn(3000).fadeOut();
     });
   }
   
   test();</code>

Kod Contoh:

Lawati pautan JSFiddle berikut untuk contoh yang berfungsi:

https://jsfiddle. net/RyGKV/

Atas ialah kandungan terperinci Cara Memudarkan Imej Latar Belakang dengan jQuery Menggunakan Elemen HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!