How to use Layui to achieve image blur and black and white effects

How to use Layui to achieve image blur and black and white effects

Layui is an excellent front-end UI framework that provides a wealth of components and tools to help developers Easily build beautiful and efficient web interfaces. In this article, we will introduce how to use Layui to achieve image blur and black and white effects, and give specific code examples.

1. Picture blur effect

To achieve the blur effect of pictures, we can use Layui's picture preview component layer.photos. When the user clicks on the image, a floating layer pops up to display the high-definition large image and add a blur effect to the large image.

First, we need to introduce Layui’s core files and related style files into the page:

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

Then, add a lay-photo## where the picture needs to be displayed. #Class name, and add the data-src attribute to the image element, the value is the original path of the image:

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

Finally, add the following code at the bottom of the page:

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

After running the code, when the user clicks on the image, the original image will be displayed in the form of a pop-up floating layer, and a blur effect will be added. You can adjust the value of the

blur attribute according to actual needs to control the degree of blur.

Picture black and white effect

To achieve the black and white effect of the picture, we can use Layui's picture carousel component slider. In the callback function of the carousel component, obtain the element currently displaying the image, and then use the CSS filter attribute to convert it to a black and white effect.

First, we need to introduce Layui's core files and related style files into the page, the same as above.

Then, add a

layui-carousel class name where the picture needs to be displayed, and add the lay-src attribute to the picture element, with the value being the path of the picture. :

<div class="layui-carousel" lay-indicator="inside" lay-arrow="always">
  <div carousel-item>
    <div><img  lay-src="path/to/image1.jpg" alt="How to use Layui to achieve image blur and black and white effects" ></div>
    <div><img  lay-src="path/to/image2.jpg" alt="How to use Layui to achieve image blur and black and white effects" ></div>
    <div><img  lay-src="path/to/image3.jpg" alt="How to use Layui to achieve image blur and black and white effects" ></div>
  </div>
</div>

Finally, add the following code at the bottom of the page:

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

After running the code, the carousel will be presented in black and white.

Summary

Through the above code examples, we can see that it is very simple to use Layui to achieve image blur and black and white effects. Just follow the steps in the article, introduce the relevant files, set the class name and attributes of the element, and add style adjustments in the corresponding callback function. Of course, the above examples are just simple demonstrations, and developers can further expand and optimize the code according to actual needs.

I hope this article will be helpful to everyone in realizing image blur and black and white effects in Layui development!

The above is the detailed content of How to use Layui to achieve image blur and black and white effects. For more information, please follow other related articles on the PHP Chinese website!