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

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

Layui는 간단하고 사용하기 쉬운 경량 프런트엔드 프레임워크입니다. 개발자가 페이지를 신속하게 구축할 수 있도록 다양한 구성 요소와 기능을 제공합니다. 그 중 레이이의 사진 썸네일 확대 효과는 사용자가 사진을 더욱 편리하게 볼 수 있도록 해주는 매우 실용적인 기능이다.

이 글에서는 Layui를 사용하여 이미지 썸네일 확대 효과를 얻는 방법을 자세히 소개하고 구체적인 코드 예제를 제공하겠습니다.

먼저 라유이의 관련 파일을 소개해야 합니다. HTML 페이지의 헤드에 다음 코드를 추가합니다.

다음으로 이미지를 표시할 컨테이너를 만들어야 합니다. 코드는 다음과 같습니다.

이 컨테이너에서는img 태그를 사용하여 그림을 표시하고 img-thumbnail클래스를 추가하여 그림 스타일을 설정했습니다.img标签来展示图片，并添加了img-thumbnail类来设置图片的样式。

$(".img-thumbnail").on("click", function() { layer.photos({ photos: { data: [ { src: $(this).attr("src") } ] }, shade: 0.7 }); });