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>