Bagaimana untuk Mencapai Imej Latar Belakang Pudar dengan jQuery menggunakan Tag HTML dan Kedudukan Mutlak?

Imej Latar Belakang Pudar: Pendekatan Alternatif dengan jQuery

Percubaan untuk memudarkan imej latar belakang secara langsung menggunakan kaedah animasi jQuery mungkin sia-sia. Walau bagaimanapun, terdapat penyelesaian yang bijak untuk cabaran ini.

Daripada memudarkan imej latar belakang, pertimbangkan untuk menggunakan HTML tag untuk memaparkan imej. Dengan menggunakan peraturan CSS untuk kedudukan mutlak (kedudukan:mutlak) dan indeks-z negatif (indeks-z:-1), imej ini boleh meniru imej latar belakang sambil kekal di belakang elemen lain.

Dengan persediaan ini, anda boleh gunakan kesan pudar jQuery pada imej untuk mencipta kesan pudar latar belakang yang diingini. Berikut ialah contoh untuk ditunjukkan:

HTML:

<code class="html"><img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Bagaimana untuk Mencapai Imej Latar Belakang Pudar dengan jQuery menggunakan Tag HTML dan Kedudukan Mutlak?" >
<img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="Bagaimana untuk Mencapai Imej Latar Belakang Pudar dengan jQuery menggunakan Tag HTML dan Kedudukan Mutlak?" ></code>

CSS:

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

jQuery :

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

Skrip ini memudarkan imej satu demi satu, mewujudkan peralihan yang lancar antara latar belakang yang berbeza.

Demo Langsung:

Lawati http://jsfiddle.net/RyGKV/ untuk demonstrasi berkesan teknik ini.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Imej Latar Belakang Pudar dengan jQuery menggunakan Tag HTML dan Kedudukan Mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!