Layui를 사용하여 이미지 흐림 및 흑백 효과를 얻는 방법

Layui를 사용하여 이미지 흐림 및 흑백 효과를 구현하는 방법

Layui는 개발자가 아름답고 효율적인 웹 인터페이스를 쉽게 구축할 수 있도록 다양한 구성 요소와 도구를 제공하는 뛰어난 프런트 엔드 UI 프레임워크입니다. 이 기사에서는 Layui를 사용하여 이미지 흐림 및 흑백 효과를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 사진 흐림 효과

사진의 흐림 효과를 얻으려면 Layui의 사진 미리보기 구성요소 레이어.photos를 사용할 수 있습니다. 사용자가 이미지를 클릭하면 플로팅 레이어가 팝업되어 고화질의 큰 이미지가 표시되고 큰 이미지에 흐림 효과가 추가됩니다.

먼저 Layui의 핵심 파일과 관련 스타일 파일을 페이지에 소개해야 합니다.

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

그런 다음 사진을 표시해야 하는 곳에 lay-photo 클래스 이름을 추가하고 사진을 제공합니다. 요소에 data-src 속성을 ​​추가하고 값은 이미지의 원래 경로입니다. lay-photo类名，并给图片元素添加data-src属性，值为图片的原始路径：

<img class="lay-photo" data-src="path/to/image.jpg" src="path/to/image.jpg" alt="图片">

最后，在页面底部添加以下代码：

<script>
layui.use(['layer'], function () {
  var layer = layui.layer;
  
  layer.photos({
    photos: '.lay-photo',
    anim: 5, // 设置弹出浮层的动画效果
    shadeClose: true, // 点击遮罩关闭浮层
    done: function (layero, index, data) {
      // 实现图片的模糊效果
      var img = layero.find('.layui-layer-content img');
      img.css({
        'filter': 'blur(5px)' // 设置图片模糊度
      });
    }
  });
});
</script>

运行代码后，当用户点击图片时，将会以弹出浮层的形式显示原始图片，并且添加了模糊效果。可以根据实际需求调整blur属性的值，来控制模糊程度。

2. 图片黑白效果

要实现图片的黑白效果，我们可以使用Layui的图片轮播组件slider。在轮播组件的回调函数中，获取到当前显示图片的元素，然后使用CSS的滤镜属性将其转换为黑白效果。

首先，我们需要在页面中引入Layui的核心文件和相关的样式文件，和上面一样。

然后，在需要展示图片的地方，添加一个layui-carousel类名，并给图片元素添加lay-src

<div class="layui-carousel" lay-indicator="inside" lay-arrow="always">
  <div carousel-item>
    <div><img  lay-src="path/to/image1.jpg" alt="Layui를 사용하여 이미지 흐림 및 흑백 효과를 얻는 방법" ></div>
    <div><img  lay-src="path/to/image2.jpg" alt="Layui를 사용하여 이미지 흐림 및 흑백 효과를 얻는 방법" ></div>
    <div><img  lay-src="path/to/image3.jpg" alt="Layui를 사용하여 이미지 흐림 및 흑백 효과를 얻는 방법" ></div>
  </div>
</div>

마지막으로 페이지 하단에 다음 코드를 추가합니다.

<script>
layui.use(['carousel'], function () {
  var carousel = layui.carousel;
  
  carousel.render({
    elem: '.layui-carousel',
    anim: 'fade',
    width: '800px',
    height: '400px',
    arrow: 'always',
    indicator: 'inside',
    autoplay: true,
    interval: 3000,
    done: function (index, elem, obj) {
      // 实现图片的黑白效果
      var imgs = elem.find('img');
      imgs.css({
        'filter': 'grayscale(100%)' // 设置图片为黑白效果
      });
    }
  });
});
</script>

를 실행한 후 코드에서는 사용자가 이미지를 클릭하면 팝업이 나타납니다. 원본 이미지는 흐림 효과가 추가된 오버레이로 표시됩니다. 실제 필요에 따라 blur 속성 값을 조정하여 흐림 정도를 제어할 수 있습니다.

사진 흑백 효과

사진의 흑백 효과를 얻으려면 Layui의 사진 캐러셀 구성 요소 슬라이더를 사용할 수 있습니다. 캐러셀 컴포넌트의 콜백 함수에서 현재 이미지를 표시하고 있는 요소를 가져온 후 CSS 필터 속성을 사용하여 흑백 효과로 변환합니다.

먼저 위와 마찬가지로 레이이의 핵심 파일과 관련 스타일 파일을 페이지에 소개해야 합니다.

🎜그런 다음 이미지를 표시해야 하는 곳에 layui-carousel 클래스 이름을 추가하고 이미지 요소에 lay-src 속성을 ​​추가합니다. 이미지 경로: 🎜rrreee🎜마지막으로 페이지 하단에 다음 코드를 추가하세요. 🎜rrreee🎜코드를 실행하면 캐러셀이 흑백으로 표시됩니다. 🎜🎜요약🎜🎜위의 코드 예제를 통해 Layui를 사용하여 이미지 흐림 및 흑백 효과를 얻는 것이 매우 간단하다는 것을 알 수 있습니다. 기사의 단계를 따르고, 관련 파일을 소개하고, 요소의 클래스 이름과 속성을 설정하고, 해당 콜백 함수에 스타일 조정을 추가하면 됩니다. 물론 위의 예는 단순한 시연일 뿐이며 개발자는 실제 필요에 따라 코드를 더욱 확장하고 최적화할 수 있습니다. 🎜🎜레이이 개발 시 이미지 블러 및 흑백 효과를 구현하는 데 이 글이 도움이 되기를 바랍니다! 🎜

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