1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>-webkit-filter</title>
6 <style type="text/css">
7 body {margin:0;font:normal 13px/1.5em "MicroSoft Yahei", Tahoma, simsun, Verdana,Lucida, Arial, Helvetica, sans-serif;}
8 .tit {position:absolute;width:320px;height:50px;overflow:hidden;margin:0;line-height:50px;font-size:24px;text-indent:25px;border-bottom:1px solid #CCCCCC;background-color:#F0F0F0;}
9 .control,
10 .shadow_ctrl {float:left;width:270px;overflow:hidden;padding:15px 25px;margin-top:50px;margin-right:10px;border-top:1px solid #FFFFFF;background-color:#F0F0F0;}
11 .shadow_ctrl {clear:both;float:left;overflow:hidden;margin:-30px 0 0;border-top:0 none;}
12 .control input,
13 .shadow_ctrl input {vertical-align:middle;}
14 .control span,
15 .shadow_ctrl span {padding:0 5px;font-weight:bold;font-size:22px;font-family:Georgia;color:#FF0000;}
16 dt {font-weight:bold;}
17 #show_pic {margin-left:10px;}
18 #show_code {margin:0;}
19 dd:last-child {overflow:hidden;padding:10px;margin:10px 0 0;font-family:Georgia;color:#99CC29;background-color:#242424;border-radius:5px;}
20 </style>
21 </head>
22
23 <body>
24 <h1 class="tit">-webkit-filter</h1>
25 <dl class="control" id="control">
26 <dt>blur</dt>
27 <dd><input type="range" min="0" max="50" id="blur_input_00" value="0" /><span id="blur_value"></span>px</dd>
28 <dt>brightness</dt>
29 <dd><input type="range" min="0" max="100" id="brightness_input_01" value="0" /><span id="brightness_value"></span>%</dd>
30 <dt>contrast</dt>
31 <dd><input type="range" min="0" max="100" id="contrast_input_02" value="0" /><span id="contrast_value"></span>%</dd>
32 <dt>grayscale</dt>
33 <dd><input type="range" min="0" max="100" id="grayscale_input_03" value="0" /><span id="grayscale_value"></span>%</dd>
34 <dt>hue-rotate</dt>
35 <dd><input type="range" min="0" max="360" id="hue-rotate_input_04" value="0" /><span id="hue-rotate_value"></span>deg</dd>
36 <dt>invert</dt>
37 <dd><input type="range" min="0" max="100" id="invert_input_05" value="0" /><span id="invert_value"></span>%</dd>
38 <dt>opacity</dt>
39 <dd><input type="range" min="0" max="100" id="opacity_input_06" value="0" /><span id="opacity_value"></span>%</dd>
40 <dt>saturate</dt>
41 <dd><input type="range" min="0" max="1000" id="saturate_input_07" value="0" /><span id="saturate_value"></span>%</dd>
42 <dt>sepia</dt>
43 <dd><input type="range" min="0" max="100" id="sepia_input_08" value="0" /><span id="sepia_value"></span>%</dd>
44 <dt>drop-shadow</dt>
45 <dd>X:<input type="range" min="-100" max="100" id="shadow_x_input_09" value="0" /><span id="shadow_x_value"></span>px</dd>
46 <dd>Y:<input type="range" min="-100" max="100" id="shadow_y_input_10" value="0" /><span id="shadow_y_value"></span>px</dd>
47 <dd>radius:<input type="range" min="0" max="30" id="shadow_ra_input_11" value="0" /><span id="shadow_ra_value"></span>px</dd>
48 <dd>R:<input type="range" min="0" max="255" id="shadow_r_input_12" value="0" /><span id="shadow_r_value"></span></dd>
49 <dd>G:<input type="range" min="0" max="255" id="shadow_g_input_13" value="0" /><span id="shadow_g_value"></span></dd>
50 <dd>B:<input type="range" min="0" max="255" id="shadow_b_input_14" value="0" /><span id="shadow_b_value"></span></dd>
51 <dd>A:<input type="range" min="0" max="1" step=".05" id="shadow_a_input_15" value="0" /><span id="shadow_a_value"></span></dd>
52 <dd>
53 <p id="show_code"></p>
54 </dd>
55 </dl>
56
57 <img src="webkit-filter-pic.jpg" alt="一张来自爱·花苑的图片" id="show_pic" />
58
59 <script type="text/javascript">
60 window.onload = function() {
61 var ctrl_box = document.getElementById("control");
62 var filter_type = document.getElementsByTagName("input",ctrl_box);
63 var filter_value = document.getElementsByTagName("span",ctrl_box);
64
65 var shadow_ctrl = document.getElementById("shadow_ctrl");
66
67 var show_p = document.getElementById("show_pic");
68 var show_code = document.getElementById("show_code");
69
70 var dw = "";
71 var last = "";
72 var resute = new Array();
73 var num = new Array();
74 var s_num = new Array();
75
76 for (var i=0; i<=filter_type.length; i++){
77 filter_value[i].innerHTML = filter_type[i].value;
78 filter_type[i].onchange = function() {
79 var filter_str = this.id.substring(-1, this.id.length - 9);
80 var filter_id = parseInt(this.id.substr(-2,3));
81
82 document.getElementById(filter_str + '_value').innerHTML = this.value;
83 if (filter_str=="blur"){
84 dw = "px";
85 }else if (filter_str=="hue-rotate"){
86 dw = "deg";
87 }else if (filter_str=="shadow_x" || filter_str=="shadow_y" || filter_str=="shadow_ra"){
88 dw = "px";
89 }else if (filter_str=="shadow_r" || filter_str=="shadow_g" || filter_str=="shadow_b" || filter_str=="shadow_a"){
90 dw = "";
91 }else {
92 dw = "%";
93 }
94
95 resute[filter_id] = filter_str + "(" + this.value + dw + ")";
96
97 if (filter_id >= 9){
98 resute[filter_id] = this.value + dw;
99 }
100
101 num[filter_id] = this.value;
102 show_p.setAttribute("style", "-webkit-filter:" + filter_str + "(" + this.value + dw + ")");
103
104 this.onmousedown = function() {
105 last = "";
106 }
107
108 this.onmouseup = function() {
109 last = "";
110 for (var j=0; j<=filter_type.length; j++){
111 if (resute[j] == undefined){
112 resute[j] = "";
113 }
114 if (resute[j] != undefined && j>=9 && resute[j] != ""){
115 last = "drop-shadow(" + resute[9] + " " + resute[10] + " " + resute[11] + " " + "rgba(" + resute[12] + "," + resute[13] + "," + resute[14] + "," + resute[15] + ")) ";
116
117 show_p.setAttribute("style", "-webkit-filter: " + last);
118 show_code.innerHTML = "-webkit-filter: " + last;
119 }
120 }
121
122 for (var j=0; j<9; j++){
123 if (resute[j] != undefined && num[j] != 0){
124 last += resute[j] + " ";
125 show_p.setAttribute("style", "-webkit-filter: " + last);
126 show_code.innerHTML = "-webkit-filter: " + last;
127 }
128 }
129 }
130 }
131 }
132
133 }
134 </script>
135 </body>
136 </html>
