jquery mencapai kesan kecerunan imej

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">

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

var image = $("#image");
var src = image.attr("src");

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

image.attr("src", "");

Seterusnya, gunakan jQuery untuk pramuat imej:

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

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();
    });
  });
});

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!