Cara menggunakan Layui untuk mencapai imej kabur dan kesan hitam putih

Cara menggunakan Layui untuk mencapai gambar kabur dan kesan hitam putih

Layui ialah rangka kerja UI bahagian hadapan yang sangat baik yang menyediakan kekayaan komponen dan Alat boleh membantu pembangun membina antara muka web yang cantik dan cekap dengan mudah. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Layui untuk mencapai imej kabur dan kesan hitam putih, dan memberikan contoh kod khusus.

1. Kesan kabur gambar

Untuk mencapai kesan kabur gambar, kita boleh menggunakan lapisan komponen pratonton gambar Layui.foto. Apabila pengguna mengklik pada imej, lapisan terapung muncul untuk memaparkan imej besar definisi tinggi dan menambah kesan kabur pada imej besar.

Pertama sekali, kita perlu memperkenalkan fail teras Layui dan fail gaya yang berkaitan ke dalam halaman:

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

Kemudian, tambahkan letak di mana imej perlu berada dipaparkan -photo nama kelas, dan tambah atribut data-src pada elemen gambar, nilainya ialah laluan asal gambar: 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="Cara menggunakan Layui untuk mencapai imej kabur dan kesan hitam putih" ></div>
    <div><img  lay-src="path/to/image2.jpg" alt="Cara menggunakan Layui untuk mencapai imej kabur dan kesan hitam putih" ></div>
    <div><img  lay-src="path/to/image3.jpg" alt="Cara menggunakan Layui untuk mencapai imej kabur dan kesan hitam putih" ></div>
  </div>
</div>

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

Gambar kesan hitam putih

Untuk mencapai kesan hitam putih gambar, kita boleh menggunakan karusel gambar Layui peluncur komponen. Dalam fungsi panggil balik komponen karusel, dapatkan elemen yang sedang memaparkan imej, dan kemudian gunakan sifat penapis CSS untuk menukarnya kepada kesan hitam putih.

Pertama sekali, kami perlu memperkenalkan fail teras Layui dan fail gaya yang berkaitan ke dalam halaman, sama seperti di atas.

#🎜🎜#Kemudian, tambahkan nama kelas layui-carousel di mana imej perlu dipaparkan dan tambahkan atribut dan nilai lay-src pada elemen imej Laluan ke imej: #🎜🎜#rrreee#🎜🎜#Akhir sekali, tambah kod berikut di bahagian bawah halaman: #🎜🎜#rrreee#🎜🎜#Selepas menjalankan kod, imej karusel akan dipaparkan dalam hitam putih. #🎜🎜##🎜🎜#Ringkasan#🎜🎜##🎜🎜#Melalui contoh kod di atas, kita dapat melihat bahawa sangat mudah untuk menggunakan Layui untuk mencapai imej kabur dan kesan hitam putih. Cuma ikut langkah dalam artikel, perkenalkan fail yang berkaitan, tetapkan nama kelas dan atribut elemen dan tambah pelarasan gaya dalam fungsi panggil balik yang sepadan. Sudah tentu, contoh di atas hanyalah demonstrasi mudah, dan pembangun boleh mengembangkan dan mengoptimumkan kod mengikut keperluan sebenar. #🎜🎜##🎜🎜# Saya harap artikel ini akan membantu anda mencapai imej kabur dan kesan hitam putih dalam pembangunan Layui! #🎜🎜#

Atas ialah kandungan terperinci Cara menggunakan Layui untuk mencapai imej kabur dan kesan hitam putih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!