Heim > Artikel > Web-Frontend > So verwenden Sie Layui, um einen Bildminiaturanzeigeeffekt zu erzielen

So verwenden Sie Layui, um einen Bildminiaturanzeigeeffekt zu erzielen

PHPzOriginal: 2023-10-24 10:07:50820Durchsuche

So verwenden Sie Layui, um den Miniaturbild-Anzeigeeffekt von Bildern zu erzielen

Einführung:
Mit der Entwicklung des Internets und des mobilen Internets werden Bilder im Internet häufig verwendet. In verschiedenen Szenarien müssen wir häufig eine große Anzahl von Bildern anzeigen. Wenn sie direkt in der Originalbildgröße angezeigt werden, wird nicht nur viel Platz auf der Webseite verschwendet, sondern auch die Ladegeschwindigkeit der Seite beeinträchtigt. Daher ist die Miniaturansicht von Bildern ein sehr wichtiges technisches Mittel. Layui ist ein hervorragendes Front-End-Entwicklungsframework, das eine Reihe einfacher und benutzerfreundlicher Komponenten bereitstellt. In diesem Artikel wird erläutert, wie Sie mit Layui den Anzeigeeffekt für Miniaturansichten von Bildern erzielen, und es werden spezifische Codebeispiele bereitgestellt.

Einführung in Layui
Zuerst müssen wir Layui-Ressourcendateien in die HTML-Seite einführen. Fügen Sie den folgenden Code im

-Tag hinzu:

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

Erstellen Sie eine Liste von Bildern
Auf der HTML-Seite können wir ein

-Tag umschließen Ein Beispiel lautet wie folgt:

<ul id="image-list">
  <li><img  src="image1.jpg" alt="So verwenden Sie Layui, um einen Bildminiaturanzeigeeffekt zu erzielen" ></li>
  <li><img  src="image2.jpg" alt="So verwenden Sie Layui, um einen Bildminiaturanzeigeeffekt zu erzielen" ></li>
  <li><img  src="image3.jpg" alt="So verwenden Sie Layui, um einen Bildminiaturanzeigeeffekt zu erzielen" ></li>
  ...
</ul>

Layui-Komponente initialisieren
Verwenden Sie im <script>-Tag die Formularkomponente und die Laypage-Komponente von Layui, um die Bildliste zu initialisieren. <br>Das Codebeispiel lautet wie folgt: </script>

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

Miniaturbildeffekt hinzufügen
Nachdem die Initialisierung der Formularkomponente und der Laypage-Komponente von Layui abgeschlossen ist, können wir den Bildern in jedem

-Tag Miniaturbildeffekte hinzufügen. Fügen Sie zunächst das Klassenattribut zu jedem So verwenden Sie Layui, um einen Bildminiaturanzeigeeffekt zu erzielen

-Tag hinzu und initialisieren Sie diese So verwenden Sie Layui, um einen Bildminiaturanzeigeeffekt zu erzielen

-Tags dann mit der Bildvorschaukomponente. Das Codebeispiel lautet wie folgt:

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

Vollständiger Beispielcode

<!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="So verwenden Sie Layui, um einen Bildminiaturanzeigeeffekt zu erzielen" ></li>
 <li><img  class="image-preview" src="image2.jpg" alt="So verwenden Sie Layui, um einen Bildminiaturanzeigeeffekt zu erzielen" ></li>
 <li><img  class="image-preview" src="image3.jpg" alt="So verwenden Sie Layui, um einen Bildminiaturanzeigeeffekt zu erzielen" ></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>

Zusammenfassung:
Durch die obigen Schritte können wir Layui verwenden, um den Miniaturbild-Anzeigeeffekt für Bilder zu erzielen. Zuerst müssen wir die Ressourcendateien von Layui einführen, dann eine Bildliste erstellen und diese mit der Formularkomponente und der Laypage-Komponente von Layui initialisieren. Fügen Sie als Nächstes jedem Bild einen Miniatureffekt hinzu, sodass eine große Bildvorschau angezeigt wird, wenn der Benutzer auf das Bild klickt. Abschließend wird es anhand konkreter Codebeispiele demonstriert. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, den Effekt der Miniaturansicht von Bildern zu erzielen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Layui, um einen Bildminiaturanzeigeeffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

layui html class ul li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie einen dynamischen Bildergalerie-Slider mit HTML, CSS und jQueryNächster Artikel：So erstellen Sie einen dynamischen Bildergalerie-Slider mit HTML, CSS und jQuery

In Verbindung stehende Artikel

Mehr sehen