Comment utiliser Layui pour obtenir un flou d'image et des effets noir et blanc

Comment utiliser Layui pour obtenir un flou d'image et des effets noir et blanc

Layui est un excellent framework d'interface utilisateur frontale qui fournit une multitude de composants et d'outils pour aider les développeurs à créer facilement des interfaces Web belles et efficaces. Dans cet article, nous présenterons comment utiliser Layui pour obtenir des effets de flou d'image et de noir et blanc, et donnerons des exemples de code spécifiques.

1. Effet de flou d'image

Pour obtenir l'effet de flou des images, nous pouvons utiliser le composant layer.photos d'aperçu d'image de Layui. Lorsque l'utilisateur clique sur l'image, un calque flottant apparaît pour afficher la grande image haute définition et ajouter un effet de flou à la grande image.

Tout d'abord, nous devons introduire les fichiers principaux de Layui et les fichiers de style associés dans la page :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>

Ensuite, là où l'image doit être affichée, ajoutez un nom de classe lay-photo et donnez l'image Ajoutez l'attribut data-src à l'élément, et la valeur est le chemin d'origine de l'image : lay-photo类名，并给图片元素添加data-src属性，值为图片的原始路径：

<img class="lay-photo" data-src="path/to/image.jpg" src="path/to/image.jpg" alt="图片">

最后，在页面底部添加以下代码：

<script>
layui.use(['layer'], function () {
  var layer = layui.layer;
  
  layer.photos({
    photos: '.lay-photo',
    anim: 5, // 设置弹出浮层的动画效果
    shadeClose: true, // 点击遮罩关闭浮层
    done: function (layero, index, data) {
      // 实现图片的模糊效果
      var img = layero.find('.layui-layer-content img');
      img.css({
        'filter': 'blur(5px)' // 设置图片模糊度
      });
    }
  });
});
</script>

运行代码后，当用户点击图片时，将会以弹出浮层的形式显示原始图片，并且添加了模糊效果。可以根据实际需求调整blur属性的值，来控制模糊程度。

2. 图片黑白效果

要实现图片的黑白效果，我们可以使用Layui的图片轮播组件slider。在轮播组件的回调函数中，获取到当前显示图片的元素，然后使用CSS的滤镜属性将其转换为黑白效果。

首先，我们需要在页面中引入Layui的核心文件和相关的样式文件，和上面一样。

然后，在需要展示图片的地方，添加一个layui-carousel类名，并给图片元素添加lay-src

<div class="layui-carousel" lay-indicator="inside" lay-arrow="always">
  <div carousel-item>
    <div><img  lay-src="path/to/image1.jpg" alt="Comment utiliser Layui pour obtenir un flou d'image et des effets noir et blanc" ></div>
    <div><img  lay-src="path/to/image2.jpg" alt="Comment utiliser Layui pour obtenir un flou d'image et des effets noir et blanc" ></div>
    <div><img  lay-src="path/to/image3.jpg" alt="Comment utiliser Layui pour obtenir un flou d'image et des effets noir et blanc" ></div>
  </div>
</div>

Enfin, ajoutez le code suivant en bas de la page :

<script>
layui.use(['carousel'], function () {
  var carousel = layui.carousel;
  
  carousel.render({
    elem: '.layui-carousel',
    anim: 'fade',
    width: '800px',
    height: '400px',
    arrow: 'always',
    indicator: 'inside',
    autoplay: true,
    interval: 3000,
    done: function (index, elem, obj) {
      // 实现图片的黑白效果
      var imgs = elem.find('img');
      imgs.css({
        'filter': 'grayscale(100%)' // 设置图片为黑白效果
      });
    }
  });
});
</script>

Après avoir exécuté le code, lorsque l'utilisateur clique sur l'image, une fenêtre contextuelle apparaîtra. L'image originale est affichée en superposition avec un effet de flou ajouté. Vous pouvez ajuster la valeur de l'attribut blur en fonction des besoins réels pour contrôler le degré de flou.

Effet image noir et blanc

Pour obtenir l'effet noir et blanc de l'image, nous pouvons utiliser le curseur de composant de carrousel d'images de Layui. Dans la fonction de rappel du composant carrousel, obtenez l'élément affichant actuellement l'image, puis utilisez l'attribut de filtre CSS pour le convertir en effet noir et blanc.

Tout d’abord, nous devons introduire les fichiers principaux de Layui et les fichiers de style associés dans la page, comme ci-dessus.

🎜Ensuite, ajoutez un nom de classe layui-carousel où l'image doit être affichée, et ajoutez l'attribut lay-src à l'élément image, la valeur étant la chemin de l'image : 🎜rrreee🎜Enfin, ajoutez le code suivant en bas de page : 🎜rrreee🎜Après avoir exécuté le code, le carrousel sera présenté en noir et blanc. 🎜🎜Résumé🎜🎜À travers les exemples de code ci-dessus, nous pouvons voir qu'il est très simple d'utiliser Layui pour obtenir un flou d'image et des effets noir et blanc. Suivez simplement les étapes de l'article, introduisez les fichiers pertinents, définissez le nom de classe et les attributs de l'élément et ajoutez des ajustements de style dans la fonction de rappel correspondante. Bien entendu, les exemples ci-dessus ne sont que de simples démonstrations, et les développeurs peuvent développer et optimiser davantage le code en fonction des besoins réels. 🎜🎜J'espère que cet article vous aidera à obtenir des effets de flou d'image et de noir et blanc dans le développement de Layui ! 🎜

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!