webkit图片滤镜 

  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>

 

posted @ 2015-03-13 12:59  zhishaofei3  阅读(152)  评论(0)    收藏  举报