Rumah > Artikel > hujung hadapan web > jquery klik untuk menukar gambar
jquery klik untuk menukar gambar
- PHPzasal
- 2023-05-25 10:22:37520semak imbas
Dalam pembangunan web, selalunya perlu menggunakan elemen gambar untuk memperkaya kandungan dan kesan visual halaman. Kadangkala, kita perlu menukar kesan paparan apabila pengguna mengklik pada gambar, seperti menukar daripada gambar biasa kepada gambar yang diserlahkan. Kemudian pada masa ini, anda perlu menggunakan perpustakaan jQuery untuk mencapai kesan interaktif ini.
jQuery ialah perpustakaan JavaScript yang biasa digunakan yang memudahkan traversal dan operasi dokumen HTML, pemprosesan acara, kesan animasi dan operasi lain. Sintaksnya ringkas dan mudah digunakan, dan ia juga mempunyai sejumlah besar pemalam untuk dipilih. Di bawah, kami akan menggunakan jQuery untuk melaksanakan contoh perubahan kesan imej berdasarkan klik.
Pertama, kita perlu memasukkan elemen imej yang ingin kita kendalikan dalam dokumen HTML. Di sini kita mengambil kereta biru sebagai contoh.
<!DOCTYPE html>
<html>
<head>
<title>jQueryjquery klik untuk menukar gambar</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#car {
width: 300px;
height: 200px;
background-image: url("blue-car.jpg");
background-size: cover;
cursor: pointer;
}
</style>
</head>
<body>
<div id="car"></div>
</body>
</html>Antaranya, kami menggunakan gaya CSS untuk menentukan saiz, imej latar belakang dan gaya kursor imej. Pada masa yang sama, kami menentukan id elemen ini sebagai "kereta" supaya ia boleh dipanggil kemudian dalam JavaScript.
Seterusnya, kita perlu menulis fungsi JavaScript untuk melaksanakan acara klik pada imej. Dalam acara ini, kita boleh menggunakan fungsi yang disediakan oleh perpustakaan jQuery untuk mengubah suai gaya elemen gambar.
$(function() {
$('#car').click(function() {
$(this).css('background-image', 'url("blue-car-highlight.jpg")');
});
});Dalam fungsi ini, kita mula-mula mendapatkan elemen imej dengan ID "kereta" melalui simbol "$" jQuery, dan kemudian mengikat fungsi mendengar acara klik padanya. Apabila pengguna mengklik pada gambar kereta, fungsi mendengar ini akan dilaksanakan.
Dalam fungsi mendengar ini, kami mengubah suai gaya elemen imej melalui fungsi "css" yang disediakan oleh pustaka jQuery Parameter pertama ialah nama atribut gaya yang akan diubah suai, dan parameter kedua ialah nilai atribut. Dalam contoh ini, kami menukar URL imej latar belakang kepada "blue-car-highlight.jpg", iaitu gambar kereta yang diserlahkan.
Perlu diambil perhatian bahawa memandangkan imej tidak mempunyai kesan serlahan dalam keadaan awal, kita perlu menambah imej lain di luar elemen imej ini, seperti "blue-car-highlight.jpg" (yang diserlahkan gambar kereta) seperti yang ditunjukkan selepas mengklik.
Kesan akhir ditunjukkan dalam gambar di bawah.
Pada ketika ini, kami telah berjaya melaksanakan fungsi menukar kesan gambar dengan satu klik. Melalui contoh di atas, kami bukan sahaja mempelajari sintaks asas perpustakaan jQuery, tetapi juga mempelajari cara menggunakan perpustakaan jQuery untuk melaksanakan halaman Web interaktif.
Atas ialah kandungan terperinci jquery klik untuk menukar gambar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!