动态应用多个CSS过滤器

Question

假设我想将一系列CSS过滤器应用于图像。这里是我的形象：

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

这里是<input type="range">滑块适用的过滤器：

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

我添加事件侦听到每个：

当我移动第二个滑块它将删除第一个的过滤器属性。但是，如果我的滤镜属性为，那么它将添加到滑块的每一步。如果我使用“更改”事件侦听器，则用户不会从实时“预览”滤镜效果中获益。 （如果用户再次回到滑块，这将导致错误的img.style.filter属性）。

那么在保留实时渲染效果的同时对相关滑块进行操作时，只更新img.style.filter属性的相关部分的最佳JavaScript（仅限于jquery）方法是什么？

Answer 1

你在这里。 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+"%)" ; 
});