动态应用多个 css 过滤器
Apply multiple css filters dynamically
假设我想对图像应用一系列 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
字符串。如果我使用 "change" 事件侦听器,用户将无法获得实时 "preview" 过滤器效果的好处。 (如果用户第二次返回滑块,将导致错误 img.style.filter
属性)。
那么什么是最好的 javascript-only (no jquery) 只更新 img.style.filter
属性 的相关部分的方法,当相关滑块被操作时保留实时渲染效果?
给你。 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+"%)" ;
});
假设我想对图像应用一系列 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
字符串。如果我使用 "change" 事件侦听器,用户将无法获得实时 "preview" 过滤器效果的好处。 (如果用户第二次返回滑块,将导致错误 img.style.filter
属性)。
那么什么是最好的 javascript-only (no jquery) 只更新 img.style.filter
属性 的相关部分的方法,当相关滑块被操作时保留实时渲染效果?
给你。 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+"%)" ;
});