<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@-webkit-keyframes testAnim {
0% {-webkit-filter: grayscale(0.5) blur(1px) saturate(2);}
100% {-webkit-filter: grayscale(0.2) blur(6px) saturate(9);}
}
/*IE,FF暂不支持*/
@-moz-keyframes testAnim {
0% {-moz-filter: grayscale(0.5) blur(1px) saturate(2);}
100% {-moz-filter: grayscale(0.2) blur(6px) saturate(9);}
}
@-ms-keyframes testAnim {
0% {-ms-filter: grayscale(0.5) blur(1px) saturate(2);}
100% {-ms-filter: grayscale(0.2) blur(6px) saturate(9); }
}
@keyframes testAnim {
0% {filter: grayscale(0.5) blur(1px) saturate(2);}
100% {filter: grayscale(0.2) blur(6px) saturate(9);}
}
#animatePhoto {}
.animatePhoto:hover,#animatePhoto:hover{
-webkit-animation-name: testAnim;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0s;
/*IE,FF暂不支持*/
-moz-animation-name: testAnim;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-out;
-moz-animation-fill-mode: forwards;
-moz-animation-delay: 0s;
-ms-animation-name: testAnim;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: 1;
-ms-animation-direction: alternate;
-ms-animation-timing-function: ease-out;
-ms-animation-fill-mode: forwards;
-ms-animation-delay: 0s;
animation-name: testAnim;
animation-duration: 2s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.l,.r{ width:40%; float:left; padding:40px;}
</style>
</head>
<body>
<div class="l">
<h3>图片滤镜特效试验</h3>
<img id="fxPhoto" src="http://avatar.csdn.net/A/7/9/1_damys.jpg" />
<div id="sliderContainer"></div>
</div>
<div class="r">
<h3>图片滤镜特效试验:hover</h3>
<img id="animatePhoto" class="animatePhoto" src="http://avatar.csdn.net/A/7/9/1_damys.jpg" />
</div>
<script type="text/javascript">
var photo = document.querySelector("#fxPhoto");
var filters = [
{ name: "grayscale", cname: "黑白照片(灰度级)效果", def: "0", unit: "", min:0 , max:1.0, step: "0.01" },
{ name: "blur", cname: "模糊效果", def: "0", unit: "px", min: 0, max: 10 , step: "1"},
{ name: "sepia", cname: "老照片(褐黄色)效果", def: "0", unit: "", min: 0, max: 1.0 , step: "0.01"},
{ name: "saturate", cname: "饱和度调整", def: "1", unit: "", min: 0, max: 1.0 , step: "0.01"},
{ name: "opacity", cname: "透明度调整", def: "1", unit: "", min: 0, max: 1.0 , step: "0.01"},
{ name: "brightness", cname: "亮度调整", def: "1", unit: "", min: 0, max: 1.0 , step: "0.01"},
{ name: "contrast", cname: "对比度调整", def: "1", unit: "", min: 0, max: 1 , step: "0.01"},
{ name: "hue-rotate", cname: "色调调整", def: "0", unit: "deg", min: 0, max: 360 , step: "1"},
{ name: "invert", cname: "色彩反相", def: "0", unit: "", min: 0, max: 1.0 , step: "0.01"}
];
// Change event
function onChange() {
var cssString = "";
filters.forEach(function(n,i) {
var value = document.querySelector('#'+n.name).value;
// Update the value title
document.querySelector('#title_'+n.name).innerHTML = "<h3>" + n.cname + "(" + n.name + ":" +value + n.unit + ")</h3>";
// Update CSS string
cssString += " " + n.name + "(" + value + n.unit + ")";
});
photo.style["-webkit-filter" ]= cssString;
}
HTMLElement.prototype.appendHTML = function(html) {
var divTemp = document.createElement("div"), nodes = null
// 文档片段,一次性append,提高性能
, fragment = document.createDocumentFragment();
divTemp.innerHTML = html;
nodes = divTemp.childNodes;
for (var i=0, length=nodes.length; i<length; i+=1) {
fragment.appendChild(nodes[i].cloneNode(true));
}
this.appendChild(fragment);
// 据说下面这样子世界会更清净
nodes = null;
fragment = null;
};
// For every filter
var container = document.querySelector("#sliderContainer");
filters.forEach(function(n) {
container.appendHTML("<p id='title_"+n.name+"'>"+n.cname+"</p>");
container.appendHTML("<input onChange='onChange()' value='"+n.def+"' type='range' id='"+n.name+"' min='"+n.min+"' max='"+n.max+"' step='"+n.step+"'>");
});
onChange();
</script>
</body>
</html>