So erzielen Sie mit Layui Bildunschärfe und Schwarzweißeffekte

So verwenden Sie Layui, um Bildunschärfe und Schwarzweißeffekte zu erzielen

Layui ist ein hervorragendes Front-End-UI-Framework, das eine Fülle von Komponenten und Tools bereitstellt, mit denen Entwickler auf einfache Weise schöne und effiziente Webschnittstellen erstellen können. In diesem Artikel stellen wir vor, wie Sie mit Layui Bildunschärfe und Schwarzweißeffekte erzielen, und geben spezifische Codebeispiele.

1. Bildunschärfeeffekt

Um den Unschärfeeffekt von Bildern zu erzielen, können wir die Bildvorschaukomponente „layer.photos“ von Layui verwenden. Wenn der Benutzer auf das Bild klickt, wird eine schwebende Ebene angezeigt, um das hochauflösende große Bild anzuzeigen und dem großen Bild einen Unschärfeeffekt hinzuzufügen.

Zuerst müssen wir die Kerndateien von Layui und zugehörige Stildateien in die Seite einführen:

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

Dann fügen Sie an der Stelle, an der das Bild angezeigt werden soll, einen lay-photo-Klassennamen hinzu und geben Sie das Bild an Fügen Sie dem Element das Attribut data-src hinzu, und der Wert ist der ursprüngliche Pfad des Bildes: 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="So erzielen Sie mit Layui Bildunschärfe und Schwarzweißeffekte" ></div>
    <div><img  lay-src="path/to/image2.jpg" alt="So erzielen Sie mit Layui Bildunschärfe und Schwarzweißeffekte" ></div>
    <div><img  lay-src="path/to/image3.jpg" alt="So erzielen Sie mit Layui Bildunschärfe und Schwarzweißeffekte" ></div>
  </div>
</div>

Fügen Sie abschließend den folgenden Code am Ende der Seite hinzu:

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

Nach dem Ausführen von Wenn der Benutzer auf das Bild klickt, wird ein Popup angezeigt. Das Originalbild wird als Überlagerung mit hinzugefügtem Unschärfeeffekt angezeigt. Sie können den Wert des Attributs blur entsprechend den tatsächlichen Anforderungen anpassen, um den Grad der Unschärfe zu steuern.

Bild-Schwarz-Weiß-Effekt

Um den Schwarz-Weiß-Effekt des Bildes zu erzielen, können wir den Bildkarussell-Komponentenschieberegler von Layui verwenden. Rufen Sie in der Rückruffunktion der Karussellkomponente das Element ab, das das Bild aktuell anzeigt, und konvertieren Sie es dann mithilfe des CSS-Filterattributs in einen Schwarzweißeffekt.

Zuerst müssen wir die Kerndateien von Layui und zugehörige Stildateien in die Seite einführen, genau wie oben.

🎜Dann fügen Sie einen Klassennamen layui-carousel hinzu, an dem das Bild angezeigt werden soll, und fügen Sie dem Bildelement das Attribut lay-src hinzu, wobei der Wert der ist Pfad des Bildes: 🎜rrreee🎜Fügen Sie abschließend den folgenden Code am Ende der Seite hinzu: 🎜rrreee🎜Nachdem Sie den Code ausgeführt haben, wird das Karussell in Schwarzweiß dargestellt. 🎜🎜Zusammenfassung🎜🎜Anhand der obigen Codebeispiele können wir sehen, dass es sehr einfach ist, mit Layui Bildunschärfe und Schwarzweißeffekte zu erzielen. Befolgen Sie einfach die Schritte im Artikel, führen Sie die relevanten Dateien ein, legen Sie den Klassennamen und die Attribute des Elements fest und fügen Sie Stilanpassungen in der entsprechenden Rückruffunktion hinzu. Natürlich handelt es sich bei den obigen Beispielen nur um einfache Demonstrationen, und Entwickler können den Code entsprechend den tatsächlichen Anforderungen weiter erweitern und optimieren. 🎜🎜Ich hoffe, dieser Artikel hilft Ihnen dabei, Bildunschärfe und Schwarzweißeffekte in der Layui-Entwicklung zu erzielen! 🎜

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit Layui Bildunschärfe und Schwarzweißeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!