Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > jquery mencapai kesan kecerunan imej

jquery mencapai kesan kecerunan imej

WBOY
Lepaskan: 2023-05-14 13:22:39
asal
616 orang telah melayarinya

Dalam reka bentuk web, aplikasi kesan kecerunan imej menjadi semakin biasa Ia bukan sahaja dapat menambahkan keindahan pada halaman web, tetapi juga menarik perhatian pengguna. Hari ini, kami akan melaksanakan kesan kecerunan imej melalui jQuery.

Pertama, dalam HTML, kita perlu memasukkan imej:

<img src="image.jpg" alt="这是一张图片" id="image">
Salin selepas log masuk

Kemudian, dalam JavaScript, kita perlu menyimpan atribut src imej ke dalam pembolehubah:

var image = $("#image");
var src = image.attr("src");
Salin selepas log masuk

Kami kemudiannya menetapkan atribut src imej kepada rentetan kosong supaya imej kelihatan kosong:

image.attr("src", "");
Salin selepas log masuk

Seterusnya, gunakan jQuery untuk pramuat imej:

$("<img>").attr("src", src).load(function() {
  // 图片加载完成后执行以下代码
  image.fadeOut(function(){
    $(this).attr("src", src).fadeIn();
  });
});
Salin selepas log masuk

dalam kod di atas, kami buat teg img baharu dan tetapkan alamat imej kepada pembolehubah src yang disimpan sebelum ini. Selepas imej baharu dimuatkan, kami melakukan kesan fade out pada imej asal, kemudian tetapkan atribut src bagi imej baharu kepada alamat imej yang disimpan sebelum ini, dan gunakan kesan fadeIn untuk menjadikan imej baharu muncul perlahan-lahan.

Akhir sekali, kita perlu memasukkan keseluruhan kod ke dalam $(document).ready() untuk memastikan kod itu boleh dilaksanakan selepas dokumen dimuatkan:

$(document).ready(function() {
  var image = $("#image");
  var src = image.attr("src");
  image.attr("src", "");
  $("").attr("src", src).load(function() {
    image.fadeOut(function(){
      $(this).attr("src", src).fadeIn();
    });
  });
});
Salin selepas log masuk

Dengan kod di atas, kami berjaya Menggunakan jQuery untuk mencapai kesan kecerunan imej, menjadikan halaman web lebih cantik dan menarik perhatian pengguna.

Atas ialah kandungan terperinci jquery mencapai kesan kecerunan imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan