jquery obtient un effet de dégradé d'image

Dans la conception Web, l'application de l'effet de dégradé d'image est de plus en plus courante. Elle peut non seulement ajouter de la beauté à la page Web, mais également attirer l'attention de l'utilisateur. Aujourd'hui, nous utiliserons jQuery pour obtenir des effets de dégradé d'image.

D'abord, en HTML, nous devons insérer une image :

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

Ensuite, en JavaScript, nous devons stocker l'attribut src de l'image dans une variable : #🎜 🎜#

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

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

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

Dans le code ci-dessus, nous créons une nouvelle balise img et définissons l'adresse de l'image sur la variable src précédemment enregistrée. Une fois la nouvelle image chargée, nous effectuons un effet de fondu sur l'image d'origine, puis définissons l'attribut src de la nouvelle image sur l'adresse de l'image précédemment enregistrée et utilisons l'effet fadeIn pour faire apparaître la nouvelle image lentement.

Enfin, nous devons mettre l'intégralité du code dans $(document).ready() pour garantir que le code peut être exécuté une fois le document chargé :

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

Through Avec le code ci-dessus, nous avons utilisé avec succès jQuery pour obtenir l'effet de dégradé d'image, rendant la page Web plus belle et attirant l'attention de l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!