Cara menggunakan Layui untuk mencapai penskalaan imej dan kesan ketelusan

Cara menggunakan Layui untuk mencapai penskalaan imej dan kesan ketelusan

Layui ialah rangka kerja UI bahagian hadapan berdasarkan jQuery Ia mudah, mudah digunakan dan berkuasa. Dalam pembangunan web, kami selalunya perlu melakukan beberapa pemprosesan kesan pada imej, seperti penskalaan dan ketelusan. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Layui untuk mencapai dua kesan ini dan memberikan contoh kod khusus.

1. Kesan penskalaan gambar

Pertama, kita perlu memperkenalkan fail teras dan helaian gaya berkaitan rangka kerja Layui. Tambahkan kod berikut pada teg

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

Seterusnya, kita boleh menggunakan komponen penskalaan imej Layui untuk mencapai kesan penskalaan imej. Tambahkan kod berikut dalam teg :

<div class="layui-row">
  <div class="layui-col-md3">
    <img  src="image.jpg" class="layui-img-zoom" alt="Cara menggunakan Layui untuk mencapai penskalaan imej dan kesan ketelusan" >
  </div>
</div>

Dalam kod di atas, kami menetapkan elemen imej sebagai sasaran zum dengan menambahkan atribut kelas. Seterusnya, kita perlu menambah kod JS berikut untuk memulakan komponen 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>

Dalam kod di atas, kami mencetuskan kesan zum imej Layui dengan mendengar peristiwa klik pada imej. Dalam acara klik, kami memperoleh atribut src imej dan memanggil kaedah layer.photos untuk mencapai kesan zum. Parameter anim mengawal gaya animasi kesan zum Di sini kita menggunakan kesan pudar.

2. Kesan ketelusan gambar

Serupa dengan kesan penskalaan gambar, kami juga perlu memperkenalkan fail teras dan helaian gaya berkaitan rangka kerja Layui terlebih dahulu. Kodnya adalah seperti berikut:

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

Kemudian, tambahkan kod berikut dalam teg :

<div class="layui-row">
  <div class="layui-col-md3">
    <img  src="image.jpg" class="layui-img-transparent" alt="Cara menggunakan Layui untuk mencapai penskalaan imej dan kesan ketelusan" >
  </div>
</div>

Dalam kod di atas, kami juga mentakrifkan elemen imej sebagai sasaran kesan ketelusan dengan menambahkan atribut kelas. Seterusnya, kita perlu menambah kod JS berikut untuk memulakan komponen 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>

Dalam kod di atas, kita mencapai kesan ketelusan apabila tetikus melayang dengan mendengar acara lekukan tetikus. Pada masa yang sama, kami menggunakan kaedah layer.tips untuk muncul kotak gesaan, yang memaparkan gesaan teks "Kesan Ketelusan". Parameter petua menentukan gaya kotak gesaan dan parameter masa mengawal masa paparan kotak gesaan. Dalam fungsi panggil balik acara tuding, kami menukar ketelusan imej dengan mengubah suai gaya CSS.

Melalui contoh kod di atas, kita boleh menggunakan rangka kerja Layui untuk mencapai penskalaan imej dan kesan ketelusan. Kesan ini bukan sahaja meningkatkan pengalaman pengguna, tetapi juga menjadikan halaman lebih jelas dan menarik. Pada masa yang sama, kesederhanaan dan kemudahan penggunaan rangka kerja Layui membolehkan kami mencapai kesan ini dengan cepat. Jika anda berminat dengan pembangunan bahagian hadapan, anda juga boleh mencuba rangka kerja Layui dan meneroka lebih banyak kesan dan fungsi.

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