jQuery menukar gambar semasa berlegar

Ciri jQuery yang sangat sejuk adalah keupayaan untuk menukar imej secara dinamik, seperti ketika anda memindahkan tetikus ke atas kawasan tertentu skrin gambar akan berubah.

Bagaimana anda melakukannya: anda merujuk harta SRC imej dan mengubahnya melalui 2 fungsi. Fungsi pertama mengubah imej dan perubahan kedua kembali. Kemudian di HTML kami menambah peristiwa ke kawasan yang tetikus akan mencetuskan fungsi (perhatikan pencetus ini juga boleh ditambah ke JavaScript). Mudah seperti itu. Lihat demo langsung jQuery tukar imej secara dinamik

Berikut ini masuk ke HTML:

<span>//this code sits outside the (document).ready function
</span>
<span>function twittereyesopen() {
</span>	<span>//alert("open");
</span>	<span>var name_element = $('#twitter-image'); 
</span>	name_element<span>.src = "/images/page-images/twitter-eyes-open.jpg";
</span><span>}
</span>
<span>function twittereyesclosed() {
</span>	<span>//alert("closed");
</span>	<span>var name_element = $('#twitter-image');
</span>	name_element<span>.src = "/images/page-images/twitter-eyes-closed.jpg";
</span><span>}</span>

soalan yang sering ditanya mengenai kesan hover imej jQuery

Bagaimana saya boleh menggunakan jQuery untuk menukar imej pada hover?

Untuk menukar imej pada hover menggunakan jQuery, anda perlu menggunakan kaedah hover (). Kaedah ini menentukan dua fungsi untuk dijalankan apabila penunjuk tetikus melayang ke atas unsur -unsur yang dipilih. Fungsi pertama dilaksanakan apabila tetikus memasuki elemen HTML, dan fungsi kedua dilaksanakan sebagai tetikus meninggalkan elemen HTML. Berikut adalah contoh mudah:

$ (dokumen) .ready (function () { ("img"). }); Bolehkah saya menggunakan CSS dan bukannya jQuery untuk menukar imej pada hover? Ini boleh dilakukan dengan menggunakan: Hover pseudo-class. Berikut adalah contoh:

img: hover {
kandungan: url ('image2.jpg');
}
Dalam contoh ini, apabila anda melayang di atas imej, ia berubah kepada 'image2.jpg'. Walau bagaimanapun, kaedah ini tidak memberikan cara untuk mengubah imej kembali apabila tetikus meninggalkan imej. Untuk fungsi itu, anda perlu menggunakan JavaScript atau jQuery. Kaedah mencari () mengembalikan elemen keturunan elemen yang dipilih. Berikut adalah contoh:

$ (document) .ready (function () { $ ("#div1"). Hover (function () {

$ ("#div2") $ ("#div2"). cari ("img"). attr ("src", "image1.jpg");

}); Apabila anda memindahkan tetikus dari 'div1', imej dalam 'div2' berubah kembali ke 'image1.jpg'.

Bagaimana saya boleh menukar imej pada hover untuk item senarai menggunakan jQuery?

Untuk menukar imej pada hover untuk item senarai, anda boleh menggunakan kaedah hover () dalam kombinasi dengan kaedah kanak -kanak (). Kaedah kanak -kanak () mengembalikan semua kanak -kanak langsung elemen yang dipilih. Berikut adalah contoh:

$ (dokumen) .ready (function () { $ ("li"). $ (this) .children ("img"). attr ("src", "image1.jpg");
});
}); Apabila anda memindahkan tetikus dari item senarai, imej kanak -kanak berubah kembali ke 'image1.jpg'.

Bagaimana saya boleh menambah kesan peralihan apabila imej berubah pada hover menggunakan jQuery? Kaedah -kaedah ini secara beransur -ansur mengubah kelegapan untuk unsur -unsur yang dipilih dari tersembunyi ke yang boleh dilihat (fadein) dan dari yang boleh dilihat kepada tersembunyi (fadeout). Berikut adalah contoh:

$ (document) .ready (function () { ("img"). fungsi () { (ini) .fadeout (500, fungsi () { $ (ini) .attr ("src", "image1.jpg"). Fadein (500); 'Image2.jpg', dan kemudian memudar. Apabila anda memindahkan tetikus, ia memudar, berubah kembali ke 'image1.jpg', dan kemudian memudar masuk. Nombor 500 mewakili tempoh kesan dalam milisaat.

Atas ialah kandungan terperinci jQuery menukar gambar semasa berlegar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!