CSS filter
1. <font size="3">.example {</font>
2. <font size="3"> filter: [];</font>
3. <font size="3"> }</font>
<font size="3">比如说,我们给图片添加一点灰度(grayscale)特效,就可以这样:</font>
1. <font size="3"> .example {</font>
2. <font size="3"> filter: grayscale(90%);</font>
3. <font size="3"> }</font>
1. <font size="3">.example {</font>
2. <font size="3"> -webkit-filter: grayscale(90%);</font>
3. <font size="3"> filter: grayscale(90%);</font>
4. <font size="3"> }</font>
1. <font size="3"> .example {</font>
2. <font size="3"> filter: blur(10px);</font>
3. <font size="3"> }</font>
4. <font size="3"> .example-2 {</font>
5. <font size="3"> filter: hue-rotate(90deg);</font>
6. <font size="3"> }</font>
1. <font size="3"> .example {</font>
2. <font size="3"> filter: grayscale(0.5) blur(10px);</font>
3. <font size="3"> }</font>
1. <font size="3"> Image Editor</font>
2. <font size="3"> Grayscale</font>
3. <font size="3"> Blur</font>
4. <font size="3"> Brightness</font>
5. <font size="3"> Contrast</font>
6. <font size="3"> Hue Rotate</font>
7. <font size="3"> Opacity</font>
8. <font size="3"> Invert</font>
9. <font size="3"> Saturate</font>
10. <font size="3"> Sepia</font>
1. <font size="3"> function addImage(e) {</font>
2. <font size="3"> var imgUrl = $("#imgUrl").val();</font>
3. <font size="3"> if (imgUrl.length) {</font>
4. <font size="3"> $("#imageContainer img").attr("src", imgUrl);</font>
5. <font size="3"> }</font>
6. <font size="3"> e.preventDefault();</font>
7. <font size="3"> }</font>
8. <font size="3"> //on pressing return, addImage() will be called</font>
9. <font size="3"> $("#urlBox").submit(addImage);</font>
1.
1. font size="3">$("input[type=range]").mousemove(editImage).change(editImage);</font>
2. <font size="3"> 复制代码编写editImage函数</font>
3. <font size="3"> 上面我们将input[type=range]的mousemove和change事件交给了editImage函数处理,所以,我们来编写一下editImage的函数代码:</font>
4. <font size="3"> function editImage() {</font>
5. <font size="3"> var gs = $("#gs").val(); // grayscale</font>
6. <font size="3"> var blur = $("#blur").val(); // blur</font>
7. <font size="3"> var br = $("#br").val(); // brightness</font>
8. <font size="3"> var ct = $("#ct").val(); // contrast</font>
9. <font size="3"> var huer = $("#huer").val(); //hue-rotate</font>
10. <font size="3"> var opacity = $("#opacity").val(); //opacity</font>
11. <font size="3"> var invert = $("#invert").val(); //invert</font>
12. <font size="3"> var saturate = $("#saturate").val(); //saturate</font>
13. <font size="3"> var sepia = $("#sepia").val(); //sepia</font>
14. <font size="3"> $("#imageContainer img").css("filter", 'grayscale(' + gs+</font>
15. <font size="3"> '%) blur(' + blur +</font>
16. <font size="3"> 'px) brightness(' + br +</font>
17. <font size="3"> '%) contrast(' + ct +</font>
18. <font size="3"> '%) hue-rotate(' + huer +</font>
19. <font size="3"> 'deg) opacity(' + opacity +</font>
20. <font size="3"> '%) invert(' + invert +</font>
21. <font size="3"> '%) saturate(' + saturate +</font>
22. <font size="3"> '%) sepia(' + sepia + '%)');</font>
23. <font size="3"> $("#imageContainer img").css("-webkit-filter", 'grayscale(' + gs+</font>
24. <font size="3"> '%) blur(' + blur +</font>
25. <font size="3"> 'px) brightness(' + br +</font>
26. <font size="3"> '%) contrast(' + ct +</font>
27. <font size="3"> '%) hue-rotate(' + huer +</font>
28. <font size="3"> 'deg) opacity(' + opacity +</font>
29. <font size="3"> '%) invert(' + invert +</font>
30. <font size="3"> '%) saturate(' + saturate +</font>
31. <font size="3"> '%) sepia(' + sepia + '%)');</font>
32. <font size="3"> }</font>
1. <font size="3"> $("#imageContainer img").css("-webkit-filter",...)</font>
2. <font size="3"> 复制代码</font>
3. <font size="3"> 这段代码其实就是在img元素实现了类似下面的效果;</font>
4. <font size="3"> </font>
5. <font size="3">[img=28,30][/img]</font>
1. <font size="3">
2.
3. <font size="3"> setTimeout(function() {</font>
4. <font size="3"> editImage();</font>
5. <font size="3"> },0);</font>
6. <font size="3"> });</font>
1. <font size="3">$('#imageEditor').on('reset', function () {</font>
2. <font size="3"> editImage();</font>
3. <font size="3"> });</font>