집 > 기사 > 웹 프론트엔드 > Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법

Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법

PHPz원래의: 2023-10-24 10:07:50879검색

소개:
인터넷과 모바일 인터넷의 발전으로 이미지가 인터넷에서 널리 사용됩니다. 다양한 시나리오에서 많은 수의 이미지를 표시해야 하는 경우가 종종 있습니다. 원본 이미지 크기로 직접 표시하면 웹 페이지 공간이 많이 낭비될 뿐만 아니라 페이지 로딩 속도에도 영향을 미칩니다. 따라서 이미지의 썸네일 표시는 매우 중요한 기술적 수단입니다. Layui는 간단하고 사용하기 쉬운 구성 요소 세트를 제공하는 뛰어난 프런트 엔드 개발 프레임워크입니다. 이 글에서는 Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

Layui 소개
먼저 HTML 페이지에 Layui 리소스 파일을 도입해야 합니다.

태그에 다음 코드를 추가하세요.

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

이미지 목록 만들기
HTML 페이지에서

예시는 다음과 같습니다.

<ul id="image-list">
  <li><img  src="image1.jpg" alt="Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법" ></li>
  <li><img  src="image2.jpg" alt="Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법" ></li>
  <li><img  src="image3.jpg" alt="Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법" ></li>
  ...
</ul>

Layui 컴포넌트 초기화
<script> 태그에서 Layui의 form 컴포넌트와laypage 컴포넌트를 사용하여 이미지 목록을 초기화합니다. <br>코드 예시는 다음과 같습니다. </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>

썸네일 효과 추가
레이이의 폼 컴포넌트와 레이페이지 컴포넌트의 초기화가 완료된 후, 각

태그의 이미지에 썸네일 효과를 추가할 수 있습니다. 먼저 각 Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법

태그에 클래스 속성을 추가한 다음 Layui의 이미지 미리보기 구성요소를 사용하여 이러한 Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법

태그를 초기화합니다. 코드 샘플은 다음과 같습니다.

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

전체 샘플 코드

<!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="Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법" ></li>
 <li><img  class="image-preview" src="image2.jpg" alt="Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법" ></li>
 <li><img  class="image-preview" src="image3.jpg" alt="Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법" ></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>

요약:
위 단계를 통해 Layui를 사용하여 이미지 썸네일 표시 효과를 얻을 수 있습니다. 먼저 Layui의 리소스 파일을 소개한 후 사진 목록을 생성하고 Layui의 form 컴포넌트와laypage 컴포넌트를 사용하여 초기화해야 합니다. 다음으로, 사용자가 이미지를 클릭하면 큰 이미지 미리보기가 팝업되도록 각 이미지에 썸네일 효과를 추가합니다. 마지막으로 구체적인 코드 예제를 사용하여 시연합니다. 이 기사가 이미지 썸네일 표시 효과를 얻는 데 도움이 되기를 바랍니다.

위 내용은 Layui를 사용하여 이미지 썸네일 표시 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

layui html class ul li

성명：

이전 기사：HTML, CSS 및 jQuery를 사용하여 동적 이미지 갤러리 슬라이더를 만드는 방법다음 기사：HTML, CSS 및 jQuery를 사용하여 동적 이미지 갤러리 슬라이더를 만드는 방법