动态应用多个css过滤器

时间:2015-11-25 16:56:09

标签: javascript css css-filters

假设我想对图像应用一系列CSS过滤器。这是我的形象:

var img = document.getElementById("my_image.png");

以下是应用过滤器的<input type="range">滑块:

var slider1 = document.getElementById("slider1");
var slider2 = document.getElementById("slider2");

我为每个人添加了一个事件监听器:

slider1.addEventListener("input", function(){
    img.style.filter = ( "sepia(" + this.value + ")" );
});
slider2.addEventListener("input", function(){
    img.style.filter = ( "blur(" + this.value + "px)" );
});

当我移动第二个滑块时,它将擦除第一个滑块的滤镜属性。但是如果我+=过滤器属性,它将在滑块的每一步添加到img.style.filter字符串。如果我使用“更改”事件监听器,则用户不会获得过滤效果的实时“预览”的好处。 (如果用户第二次返回滑块,则会导致错误的img.style.filter属性。)

那么,在保留实时渲染效果的同时操作相关滑块时,只更新img.style.filter属性的相关部分的最佳javascript(无jquery)方法是什么?

1 个答案:

答案 0 :(得分:2)

你走了。 https://jsfiddle.net/2p8kwjv1/1/

显然,如果您需要多个过滤器,则必须在同一过滤器定义中定义它们。像这样

img{
    filter: blur(50px) sepia(50%);
    -webkit-filter: blur(50px) sepia(50%);
}

所以要在javascript中实现这一点,你必须保持对这些值的引用。然后每次更改棕褐色时,您还可以应用当前模糊值,同时动态显示两个滤镜。

var sepia = slider1.value;
var blur = slider2.value;

slider1.addEventListener("input", function(){
    sepia = this.value;
    img.style["-webkit-filter"] = "blur("+blur+"px) sepia(" + this.value + "%)";
});
slider2.addEventListener("input", function(){
    blur = this.value;
    img.style["-webkit-filter"] = "blur(" + this.value + "px) sepia("+sepia+"%)" ;
});