Cara menggunakan Layui untuk mencapai kesan penyamaran imej

Cara menggunakan Layui untuk mencapai kesan penyamaran imej

Dalam pembangunan web, kesan penyamaran imej ialah kesan interaktif biasa, yang boleh Meningkatkan daya tarikan visual gambar melalui topeng juga boleh berfungsi sebagai peringatan. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Layui untuk mencapai kesan pelekat imej dan memberikan contoh kod khusus.

Layui ialah rangka kerja UI bahagian hadapan yang ringan yang menyediakan pelbagai komponen dan antara muka dan sangat sesuai untuk membina antara muka bahagian hadapan dengan cepat. Untuk mencapai kesan pelekat imej, anda perlu menggunakan beberapa komponen dan ciri Layui, termasuk senarai imej, lapisan pelekat, mendengar acara, dsb.

1. Memperkenalkan rangka kerja Layui

Pertama sekali, anda perlu memuat turun rangka kerja Layui dan memperkenalkan fail CSS dan JavaScript yang berkaitan ke dalam HTML fail. Anda boleh memuat turun versi terkini rangka kerja dari laman web rasmi Layui (http://www.layui.com/), dan kemudian tambah kod berikut dalam fail HTML:

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

#🎜🎜 #Buat senarai gambar#🎜 🎜#
Seterusnya, anda perlu membuat senarai untuk memaparkan imej. Ia boleh dilaksanakan melalui komponen jadual Layui, dan digabungkan dengan modul gambar Layui, maklumat gambar boleh dipaparkan dengan mudah. Berikut ialah contoh kod HTML:

<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="150">
  </colgroup>
  <thead>
    <tr>
      <th>图片标题</th>
      <th>图片</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>图片1</td>
      <td><img  src="img/1.jpg" alt="Cara menggunakan Layui untuk mencapai kesan penyamaran imej" ></td>
    </tr>
    <tr>
      <td>图片2</td>
      <td><img  src="img/2.jpg" alt="Cara menggunakan Layui untuk mencapai kesan penyamaran imej" ></td>
    </tr>
    ...
  </tbody>
</table>

Ambil perhatian bahawa hanya dua imej ditunjukkan dalam contoh di atas, anda boleh menambah lebih banyak imej mengikut keperluan.

Tambah gaya CSS

Seterusnya, anda perlu menambah beberapa gaya CSS untuk menetapkan kesan topeng imej. Anda boleh menambah kod berikut dalam teg <style> dalam fail HTML:

.layui-table td img {
  width: 100%;
  height: auto;
  cursor: pointer;
  position: relative;
}

.layui-table td .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.layui-table td:hover .mask {
  opacity: 1;
}

Dalam kod di atas, kami menetapkan lebar dan tinggi imej, sebagai serta gaya penunjuk. Lapisan topeng menggunakan kedudukan mutlak dan meliputi bahagian atas imej, dan warna latar belakang adalah hitam lut sinar. Ketelusan lapisan topeng ditetapkan kepada 0, dan kesan peralihan ditambah. Apabila tetikus melayang di atas imej, ketelusan lapisan topeng berubah dari 0 kepada 1, merealisasikan animasi kesan topeng. <style>标签中添加以下代码：

layui.use(['layer'], function() {
  var layer = layui.layer;
  
  $('.layui-table td img').click(function() {
    var src = $(this).attr('src');
    layer.open({
      type: 1,
      title: false,
      closeBtn: 0,
      skin: 'layui-layer-nobg',
      shadeClose: true,
      content: '<img  src="' + src + '"   style="max-width:90%" alt="Cara menggunakan Layui untuk mencapai kesan penyamaran imej" >',
    });
  });
});

上述代码中，我们为图片设置了宽度和高度，以及一个指针样式。遮罩层使用绝对定位，覆盖在图片上方，背景颜色为半透明的黑色。遮罩层的透明度设置为0，并且增加了过渡效果。当鼠标悬停在图片上方时，遮罩层的透明度从0变为1，实现了遮罩效果的动画。

4. 添加JavaScript代码

最后，你需要添加一些JavaScript代码来监听图片的点击事件，以及展示大图的效果。可以在HTML文件中的<script></script>

Tambah kod JavaScript

Akhir sekali, anda perlu menambah beberapa kod JavaScript untuk memantau acara klik pada imej dan paparan kesan imej yang besar. Anda boleh menambah kod berikut dalam teg <script></script> dalam fail HTML:

rrreee#🎜🎜#Dalam kod di atas, kami mencipta lapisan pop timbul melalui modul lapisan Layui untuk Tunjukkan gambaran besar. Apabila gambar diklik, laluan gambar diperoleh, dan lapisan pop timbul dibuka melalui kaedah layer.open untuk memaparkan gambar besar. Gaya dan fungsi lapisan pop timbul boleh dilaraskan mengikut keperluan anda sendiri. #🎜🎜##🎜🎜#Setakat ini, kami telah menyelesaikan langkah-langkah menggunakan Layui untuk mencapai kesan topeng imej. Anda boleh menjalankan pembangunan sebenar berdasarkan kod sampel di atas, dan menyesuaikan gaya dan fungsi mengikut keperluan. Melalui komponen dan ciri yang disediakan oleh Layui, ia menjadi mudah dan pantas untuk mencapai kesan pelekat imej. #🎜🎜#

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