Cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej-tutorial js-php.cn

Cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej

PHPz

Lepaskan： 2023-10-24 10:07:50

asal

849 orang telah melayarinya

Cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej

Cara menggunakan Layui untuk mencapai kesan paparan lakaran kecil imej

Pengenalan:
Dengan perkembangan Internet dan Internet mudah alih, imej sangat biasa digunakan di Internet. Dalam senario yang berbeza, kita sering menghadapi keperluan untuk memaparkan sejumlah besar imej Jika dipaparkan terus dalam saiz imej asal, ia bukan sahaja akan membazirkan banyak ruang halaman web, tetapi juga menjejaskan kelajuan memuatkan halaman. Oleh itu, paparan lakaran kenit imej adalah cara teknikal yang sangat penting. Layui ialah rangka kerja pembangunan bahagian hadapan yang sangat baik yang menyediakan satu set komponen yang ringkas dan mudah digunakan. Artikel ini akan memperkenalkan cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej dan memberikan contoh kod khusus.

Memperkenalkan Layui
Pertama, kita perlu memperkenalkan fail sumber Layui ke dalam halaman HTML. Tambahkan kod berikut dalam teg

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

Salin selepas log masuk

Buat senarai imej
Dalam halaman HTML, kami boleh membuat teg

<ul id="image-list">
  <li><img  src="image1.jpg" alt="Cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej" ></li>
  <li><img  src="image2.jpg" alt="Cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej" ></li>
  <li><img  src="image3.jpg" alt="Cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej" ></li>
  ...
</ul>

Salin selepas log masuk

Inisialisasikan komponen Layui
Dalam teg , gunakan komponen borang Layui dan komponen laypage untuk memulakan senarai imej.
Contoh kod adalah seperti berikut:

<script>
layui.use(['form', 'laypage'], function(){
  var form = layui.form;
  var laypage = layui.laypage;
  
  //初始化图片列表
  laypage.render({
 elem: '#image-list',
 layout: ['prev', 'page', 'next', 'skip'],
 limit: 10,
 jump: function(obj){
   //根据当前页数和每页显示数量，计算出应该展示的图片起始索引和结束索引
   var start = (obj.curr - 1) * obj.limit;
   var end = start + obj.limit;
   
   //对图片列表进行处理，只展示起始索引到结束索引之间的图片
   var $lis = $('#image-list li');
   $lis.each(function(index){
     if(index >= start && index < end){
       $(this).show();
     }else{
       $(this).hide();
     }
   });
   
   //重新渲染Layui的form组件，以便更新分页信息
   form.render();
 }
  });
});
</script>

Salin selepas log masuk

Tambah kesan lakaran kenit
Selepas permulaan komponen borang Layui dan komponen laypage selesai, kita boleh menambah kesan lakaran kecil pada imej dalam setiap tag

Mula-mula, tambahkan atribut kelas pada setiap teg Cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej

dan kemudian gunakan komponen pratonton imej Layui untuk memulakan teg Cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej

Contoh kod adalah seperti berikut:

<script>
layui.use(['form', 'laypage', 'layer'], function(){
  var form = layui.form;
  var laypage = layui.laypage;
  var layer = layui.layer;
  
  //初始化图片列表
  laypage.render({
 elem: '#image-list',
 layout: ['prev', 'page', 'next', 'skip'],
 limit: 10,
 jump: function(obj){
   //省略上述代码...
 }
  });
  
  //初始化图片预览组件
  $('.image-preview').each(function(){
 //获取图片原始地址
 var imageUrl = $(this).attr('src');
 //给图片绑定点击事件
 $(this).on('click',function(){
   //调用Layui的图片预览方法
   layer.photos({   
     photos: {
       data: [
         {
           src: imageUrl 
         }
       ]
     },
     anim: 5
   });
 });
  });
});
</script>

Salin selepas log masuk

Kod sampel lengkap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>图片缩略图展示</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css">
</head>
<body>
  <ul id="image-list">
 <li><img  class="image-preview" src="image1.jpg" alt="Cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej" ></li>
 <li><img  class="image-preview" src="image2.jpg" alt="Cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej" ></li>
 <li><img  class="image-preview" src="image3.jpg" alt="Cara menggunakan Layui untuk mencapai kesan paparan lakaran kenit imej" ></li>
 ...
  </ul>

  <script src="https://cdn.jsdelivr.net/npm/layui@2.5.6"></script>
  <script>
  layui.use(['form', 'laypage', 'layer'], function(){
 var form = layui.form;
 var laypage = layui.laypage;
 var layer = layui.layer;

 laypage.render({
   elem: '#image-list',
   layout: ['prev', 'page', 'next', 'skip'],
   limit: 10,
   jump: function(obj){
     var start = (obj.curr - 1) * obj.limit;
     var end = start + obj.limit;

     var $lis = $('#image-list li');
     $lis.each(function(index){
       if(index >= start && index < end){
         $(this).show();
       }else{
        $(this).hide();
       }
     });

     form.render();
   }
 });

 $('.image-preview').each(function(){
   var imageUrl = $(this).attr('src');
   $(this).on('click',function(){
     layer.photos({
       photos: {
         data: [
           {
             src: imageUrl 
           }
         ]
       },
       anim: 5
     });
   });
 });
  });
  </script>
</body>
</html>

Salin selepas log masuk

Ringkasan:
Melalui langkah di atas, kita boleh menggunakan Layui untuk mencapai kesan paparan lakaran kecil imej. Mula-mula, kita perlu memperkenalkan fail sumber Layui, kemudian mencipta senarai gambar, dan memulakannya menggunakan komponen borang Layui dan komponen laypage. Seterusnya, tambahkan kesan lakaran kenit pada setiap imej supaya apabila pengguna mengklik pada imej, pratonton imej yang besar akan muncul. Akhirnya, ia ditunjukkan menggunakan contoh kod konkrit. Saya harap artikel ini dapat membantu anda mencapai kesan paparan lakaran kecil imej.

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