js给图片加滤镜(javascript 滤镜)

Javascript是一种广泛应用于网页开发的客户端脚本语言，随着技术的不断发展，Javascript不仅可以实现页面上的动态效果和交互特效，而且还可以用来制作滤镜。

滤镜常用于图片处理，通过对图片进行颜色、亮度、对比度、饱和度等方面的调整，从而达到滤镜的效果。在Javascript中，可以使用CSS3滤镜属性来完成功能，为了方便操作，通常会使用jQuery库中的函数，比如Masonry。

//HTML

//Javascript
$(document).ready(function(){
$('#image').mouseover(function() {
$(this).css('-webkit-filter', 'blur(5px)');
$(this).css('filter', 'blur(5px)');
});
$('#image').mouseout(function() {
$(this).css('-webkit-filter', '');
$(this).css('filter', '');
});
});

上面的代码展示了如何使用Javascript制作模糊滤镜效果。当鼠标移动到图片上方时，图片会变模糊，鼠标离开时还原。我们可以通过jQuery函数Mouseover和Mouseout来实现这个效果。

下面再看一个动态效果的例子，如何使用Javascript制作黑白滤镜效果。

//HTML

//CSS
.white-image{
width:200px;
height:200px;
background-size:cover;
transition: filter 1s; 
}
//Javascript
$(document).ready(function(){
$('.white-image').hover(function(){
$(this).css('filter','grayscale(100%)');
},function(){
$(this).css('filter','');
});
});

上面的代码中，将图片设置为背景，在鼠标悬停在这个元素上的时候，使用CSS3 filter属性实现黑白效果。

除了以上的示例，还有其他的滤镜效果，比如锐化、模糊化、反转、褐色等。无论我们要实现什么滤镜效果，都可以使用Javascript、jQuery和CSS3来实现。

总结来说，Javascript能够实现滤镜的效果，让网页呈现更加丰富多彩的效果。与此同时，为了方便操作，我们可以使用jQuery库中的函数。如果想要制作一个滤镜效果的网站，相信Javascript会成为您不可或缺的工具。