在网页设计中，为图片添加模糊与黑白效果能为页面增添独特的视觉魅力。Layui作为一款优秀的前端框架，提供了便捷的方式来实现这些效果。下面就详细介绍如何利用Layui达成图片模糊与黑白效果。

要实现图片模糊效果。在HTML部分，需要有一个展示图片的容器，比如使用img标签嵌入图片，并给它一个唯一的id以便后续操作。例如：<img id="myImg" src="your-image-url.jpg" alt="示例图片">。

在CSS样式中，可以先定义一个用于模糊效果的类。通过filter属性来实现模糊效果，如：.blur-effect { filter: blur(5px); } ，这里的5px可以根据实际需要调整模糊的程度。

接下来，在Layui中，我们使用JavaScript来动态添加或移除这个模糊类。引入Layui的js文件后，使用如下代码：

layui.use('jquery', function () {
    var $ = layui.jquery;
    $('#myImg').click(function () {
        $(this).toggleClass('blur-effect');
    });
});

这段代码的作用是当图片被点击时，切换模糊类，实现点击切换图片模糊与清晰状态的效果。

再来说说图片黑白效果的实现。同样在HTML部分准备好展示图片的元素。CSS样式中，定义一个用于黑白效果的类：.grayscale-effect { filter: grayscale(100%); }，100%代表完全黑白，数值越小，彩色保留越多。

在Layui的JavaScript代码中，实现黑白效果的切换：

layui.use('jquery', function () {
    var $ = layui.jquery;
    $('#myImg').dblclick(function () {
        $(this).toggleClass('grayscale-effect');
    });
});

这段代码让图片在双击时，切换黑白类，达成双击切换图片彩色与黑白状态的目的。

通过上述方法，利用Layui结合CSS和JavaScript，能够轻松实现图片的模糊与黑白效果。这不仅丰富了网页的交互性，还能为用户带来全新的视觉体验，提升网站的整体品质。无论是展示艺术作品还是打造独特的界面风格，这些效果都能发挥重要作用，让你的网页在众多页面中脱颖而出。