Comment utiliser Layui pour obtenir des effets de mise à l'échelle et de transparence de l'image

Comment utiliser Layui pour obtenir des effets de mise à l'échelle et de transparence d'image

Layui est un framework d'interface utilisateur frontal basé sur jQuery. Il est simple, facile à utiliser et puissant. Dans le développement Web, nous devons souvent effectuer certains traitements d'effets sur les images, tels que la mise à l'échelle et la transparence. Cet article expliquera comment utiliser le framework Layui pour obtenir ces deux effets et donnera des exemples de code spécifiques.

1. Effet de mise à l'échelle de l'image

Tout d'abord, nous devons présenter les fichiers de base et les feuilles de style associées du framework Layui. Ajoutez le code suivant à la balise

<link rel="stylesheet" href="//res.layui.com/layui/v2.6.8/css/layui.css" media="all">
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//res.layui.com/layui/v2.6.8/layui.all.js" charset="utf-8"></script>

Ensuite, nous pouvons utiliser le composant de mise à l'échelle d'image de Layui pour obtenir l'effet de mise à l'échelle de l'image. Ajoutez le code suivant dans la balise  :

<div class="layui-row">
  <div class="layui-col-md3">
    <img  src="image.jpg" class="layui-img-zoom" alt="Comment utiliser Layui pour obtenir des effets de mise à l'échelle et de transparence de l'image" >
  </div>
</div>

Dans le code ci-dessus, nous définissons l'élément image comme cible du zoom en ajoutant l'attribut class. Ensuite, nous devons ajouter le code JS suivant pour initialiser le composant Layui :

<script>
layui.use('layer', function(){
  var layer = layui.layer;
  
  $(".layui-img-zoom").on("click", function(){
    var src = $(this).attr("src");
    layer.photos({
      photos: {
        data: [{
          src: src
        }]
      },
      anim: 5
    });
  });
});
</script>

Dans le code ci-dessus, nous déclenchons l'effet de zoom de l'image de Layui en écoutant l'événement de clic de l'image. Dans l'événement click, nous obtenons l'attribut src de l'image et appelons la méthode layer.photos pour obtenir l'effet de zoom. Le paramètre anim contrôle le style d'animation de l'effet de zoom. Ici, nous utilisons l'effet de fondu.

2. Effet de transparence de l'image

Semblable à l'effet de mise à l'échelle de l'image, nous devons également d'abord introduire les fichiers de base et les feuilles de style associées du framework Layui. Le code est le suivant :

<link rel="stylesheet" href="//res.layui.com/layui/v2.6.8/css/layui.css" media="all">
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//res.layui.com/layui/v2.6.8/layui.all.js" charset="utf-8"></script>

Ensuite, ajoutez le code suivant dans la balise :

<div class="layui-row">
  <div class="layui-col-md3">
    <img  src="image.jpg" class="layui-img-transparent" alt="Comment utiliser Layui pour obtenir des effets de mise à l'échelle et de transparence de l'image" >
  </div>
</div>

Dans le code ci-dessus, nous définissons également l'élément image comme cible de l'effet de transparence en ajoutant l'attribut class. Ensuite, nous devons ajouter le code JS suivant pour initialiser le composant Layui :

<script>
layui.use('layer', function(){
  var layer = layui.layer;
  
  $(".layui-img-transparent").hover(function(){
    var src = $(this).attr("src");
    layer.tips('透明效果', this, {
      tips: [1, '#000'],
      time: 2000
    });
    $(this).css("opacity", "0.5");
  }, function(){
    $(this).css("opacity", "1.0");
  });
});
</script>

Dans le code ci-dessus, nous obtenons l'effet de transparence lorsque la souris survole en écoutant l'événement de survol de la souris. Dans le même temps, nous avons utilisé la méthode layer.tips pour faire apparaître une boîte de dialogue affichant l'invite de texte "Effet de transparence". Le paramètre tips spécifie le style de la boîte d'invite et le paramètre time contrôle la durée d'affichage de la boîte d'invite. Dans la fonction de rappel de l'événement hover, on change la transparence de l'image en modifiant le style CSS.

Grâce à l'exemple de code ci-dessus, nous pouvons utiliser le framework Layui pour obtenir des effets de mise à l'échelle et de transparence des images. Ces effets améliorent non seulement l'expérience utilisateur, mais rendent également la page plus vivante et plus attrayante. Dans le même temps, la simplicité et la facilité d'utilisation du framework Layui nous permettent d'obtenir rapidement ces effets. Si vous êtes intéressé par le développement front-end, vous pouvez aussi bien essayer le framework Layui et explorer plus d'effets et de fonctions.

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!