CSS3 filter滤镜属性小项目——图片高斯模糊、高亮、对比度、灰度、色调、色彩旋转、透明、饱和、褐色调整
学到了CSS3的filter属性，心血来潮做了个filter滤镜组工具，可以多重给自己的图片添加滤镜。
拿走不谢，别忘了更改对应的路径名。
代码如下
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Junking图片滤镜工具</title>
<link rel="stylesheet" type="text/css" href="css/imgChange.css" />
</head>
<body>
<div>
<figure>
<img src="img/Junking.jpg" alt="原始图片" width="500px" height="500px" />
<figcaption>原始图片</figcaption>
</figure>
<figure id="f">
<img src="img/Junking.jpg" alt="修改图片" width="500px" height="500px" />
<figcaption>修改图片</figcaption>
</figure>
</div>
<div id="changeArea">
<div>
<span>高斯模糊</span><input type="range" id="blur" step="1" max="30" min="0" value="0" onmousemove="Change(this)" />
</div>
<div>
<span>高亮滤镜</span><input type="range" id="brightness" step="0.01" max="2" min="0" value="1" onmousemove="Change(this)" />
</div>
<div>
<span>对比滤镜</span><input type="range" id="contrast" step="0.01" max="2" min="0" value="1" onmousemove="Change(this)" />
</div>
<div>
<span>灰度滤镜</span><input type="range" id="grayscale" step="0.01" max="1" min="0" value="0" onmousemove="Change(this)" />
</div>
<div>
<span>色调旋转</span><input type="range" id="hue-rotate" step="1" max="360" min="0" value="0" onmousemove="Change(this)" />
</div>
<div>
<span>色彩翻转</span><input type="range" id="invert" step="0.01" max="1" min="0" value="0" onmousemove="Change(this)" />
</div>
<div>
<span>透明滤镜</span><input type="range" id="opacity" step="0.01" max="1" min="0" value="1" onmousemove="Change(this)" />
</div>
<div>
<span>饱和滤镜</span><input type="range" id="saturate" step="0.01" max="1" min="0" value="1" onmousemove="Change(this)" />
</div>
<div>
<span>褐色滤镜</span><input type="range" id="sepia" step="0.01" max="1" min="0" value="0" onmousemove="Change(this)" />
</div>
</div>
</body>
<script src="js/imgChange.js" type="text/javascript" charset="utf-8"></script>
</html>CSS部分
body figure {
display: inline-block;
}
figure>figcaption {
text-align: center;
}
#changeArea {
align-content: center;
}
JavaScript部分
var objStyle = document.getElementById("f").style; //获取图片figure元素的style
var blur = 0;
var brightness = 1;
var contrast = 1;
var grayscale=0;
var hueRotate=0;
var invert=0;
var opacity=1;
var saturate=1;
var sepia=0;
function Change(v) {
if(v.id=="blur"){
blur=v.value;
on();
}else if(v.id=="brightness"){
brightness=v.value;
on();
}else if(v.id=="contrast"){
contrast=v.value;
on();
}else if(v.id=="grayscale"){
grayscale=v.value;
on();
}else if(v.id=="hue-rotate"){
hueRotate=v.value;
on();
}else if(v.id=="invert"){
invert=v.value;
on();
}else if(v.id=="opacity"){
opacity=v.value;
on();
}else if(v.id=="saturate"){
saturate=v.value;
on();
}else if(v.id=="sepia"){
sepia=v.value;
on();
}
}
function on() {
var str = "blur(" + blur + "px) brightness(" + brightness + ") contrast("+contrast+") grayscale("+grayscale+") hue-rotate("+hueRotate+"deg) invert("+invert+") opacity("+opacity+") saturate("+saturate+") sepia("+sepia+")";
objStyle.filter =str;
objStyle.webkitFilter = str;
}
效果图如下：