jquery mengubah suai rancangan gambar

Dengan perkembangan dan kemajuan teknologi Internet, gambar memainkan peranan yang semakin penting dalam kehidupan kita, dan jQuery, sebagai perpustakaan JavaScript yang popular, boleh membantu kami mengubah suai kesan paparan gambar dengan mudah. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengubah suai paparan imej.

1. Persediaan

Sebelum bermula, kita perlu melakukan beberapa persiapan.

1.1 Muat turun jQuery

Mula-mula anda perlu pergi ke [laman web rasmi](https://jquery.com/download/) untuk memuat turun versi terkini jQuery dan memperkenalkannya ke dalam projek . Contohnya:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

1.2 Tambah gambar

Tambah gambar dalam HTML dan tambahkan atribut ID kepada mereka untuk memudahkan operasi kami dalam jQuery. Contohnya:

<img src="img/photo.jpg" id="photo">

2. Ubah suai paparan imej

show() ialah kaedah dalam jQuery untuk memaparkan elemen. Kita boleh menggunakannya untuk mengubah suai paparan imej.

Berikut ialah beberapa kaedah show() yang biasa digunakan:

2.1 Paparkan imej

$('#photo').show();

Kod ini akan memaparkan imej. Jika imej disembunyikan, ia akan ditunjukkan. Jika imej sudah dipaparkan, tiada tindakan akan diambil.

2.2 Paparkan gambar dan tambah kesan animasi

Sesetengah parameter boleh ditambah pada kaedah show() untuk menambah kesan animasi.

$('#photo').show('slow');
$('#photo').show('fast');

Dua keping kod ini masing-masing akan memaparkan imej pada kelajuan perlahan dan kelajuan pantas, dan menambah kesan animasi yang ringkas.

2.3 Paparkan imej dan tambah fungsi panggil balik

Anda boleh menambah fungsi panggil balik dalam kaedah show() untuk melaksanakan operasi lain selepas paparan selesai.

$('#photo').show('slow', function() {
  console.log('图片已经显示');
});

Kod ini akan memaparkan imej pada kelajuan perlahan dan mengeluarkan rentetan ke konsol selepas paparan selesai.

3. Pemahaman yang lebih mendalam tentang show()

Sebelum membincangkan pelbagai kaedah show(), kita perlu mempunyai pemahaman yang lebih mendalam tentang kaedah show().

3.1 show() penggunaan kaedah

Penggunaan kaedah show() dalam jQuery adalah sangat mudah. Elemen boleh dipilih melalui pemilih dan kaedah show() boleh dipanggil untuk memaparkan elemen.

$(selector).show(speed, callback)

Penjelasan parameter:

• selector: diperlukan, elemen untuk dipaparkan.
• speed: Pilihan, menentukan kesan kelajuan yang akan digunakan.
• callback: Pilihan, menentukan fungsi yang akan dilaksanakan apabila animasi selesai.

3.2 Kesan Kelajuan

Dengan menyatakan parameter show() dalam kaedah speed, anda boleh mengawal kelajuan animasi. Unit kelajuan boleh menjadi milisaat atau rentetan "perlahan" atau "cepat", atau ia boleh disesuaikan. Contohnya:

$('#photo').show(1000);        // 以1秒速度显示图片
$('#photo').show('slow');      // 以慢速显示图片，相当于400ms
$('#photo').show('fast');      // 以快速显示图片，相当于200ms
$('#photo').show('medium');    // 以中等速度显示图片，相当于600ms
$('#photo').show('veryfast');  // 以极快速度显示图片，相当于50ms

3.3 Fungsi panggil balik

Fungsi panggil balik ialah parameter pilihan yang boleh melakukan operasi lain selepas animasi selesai. Contohnya:

$('#photo').show('slow', function() {
  console.log('图片已经显示');
});

Kod ini akan memaparkan imej pada kelajuan perlahan dan mengeluarkan rentetan ke konsol selepas paparan selesai.

4. Ubah suai sembunyikan imej

hide() kaedah serupa dengan kaedah show() dan digunakan untuk menyembunyikan elemen. Berikut ialah beberapa kaedah hide() yang biasa digunakan:

4.1 Menyembunyikan gambar

$('#photo').hide();

Kod ini akan menyembunyikan gambar. Jika imej sudah disembunyikan, tiada tindakan akan diambil. Jika imej sudah dipaparkan, ia akan disembunyikan.

4.2 Sembunyikan gambar dan tambah kesan animasi

Sesetengah parameter boleh ditambah pada kaedah hide() untuk menambah kesan animasi.

$('#photo').hide('slow');
$('#photo').hide('fast');

Dua keping kod ini masing-masing akan menyembunyikan imej pada kelajuan perlahan dan pantas, dan menambah kesan animasi yang ringkas.

4.3 Sembunyikan gambar dan tambah fungsi panggil balik

Anda boleh menambah fungsi panggil balik dalam kaedah hide() untuk melaksanakan operasi lain selepas penyembunyian selesai.

$('#photo').hide('slow', function() {
  console.log('图片已经隐藏');
});

Kod ini akan menyembunyikan imej perlahan-lahan dan mengeluarkan rentetan ke konsol selepas penyembunyian selesai.

5. Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery untuk mengubah suai paparan imej, termasuk kaedah show() yang biasa digunakan, pemahaman mendalam tentang kaedah show() dan cara menggunakan kaedah hide() untuk menyembunyikan imej. Apabila menggunakan jQuery, amalan menjadi sempurna!

Atas ialah kandungan terperinci jquery mengubah suai rancangan gambar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!