webkit图片滤镜

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>-webkit-filter</title>

 <style type="text/css">

 body {margin:0;font:normal 13px/1.5em "MicroSoft Yahei", Tahoma, simsun, Verdana,Lucida, Arial, Helvetica, sans-serif;}

 .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;}

 .control,

 .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;}

 .shadow_ctrl {clear:both;float:left;overflow:hidden;margin:-30px 0 0;border-top:0 none;}

 .control input,

 .shadow_ctrl input {vertical-align:middle;}

 .control span,

 .shadow_ctrl span {padding:0 5px;font-weight:bold;font-size:22px;font-family:Georgia;color:#FF0000;}

 dt {font-weight:bold;}

 #show_pic {margin-left:10px;}

 #show_code {margin:0;}

 dd:last-child {overflow:hidden;padding:10px;margin:10px 0 0;font-family:Georgia;color:#99CC29;background-color:#242424;border-radius:5px;}

 </style>

 </head>

 <body>

 <h1 class="tit">-webkit-filter</h1>

 <dl class="control" id="control">

     <dt>blur</dt>

     <dd><input type="range" min="0" max="50" id="blur_input_00" value="0" /><span id="blur_value"></span>px</dd>

     <dt>brightness</dt>

     <dd><input type="range" min="0" max="100" id="brightness_input_01" value="0" /><span id="brightness_value"></span>%</dd>

     <dt>contrast</dt>

     <dd><input type="range" min="0" max="100" id="contrast_input_02" value="0" /><span id="contrast_value"></span>%</dd>

     <dt>grayscale</dt>

     <dd><input type="range" min="0" max="100" id="grayscale_input_03" value="0" /><span id="grayscale_value"></span>%</dd>

     <dt>hue-rotate</dt>

     <dd><input type="range" min="0" max="360" id="hue-rotate_input_04" value="0" /><span id="hue-rotate_value"></span>deg</dd>

     <dt>invert</dt>

     <dd><input type="range" min="0" max="100" id="invert_input_05" value="0" /><span id="invert_value"></span>%</dd>

     <dt>opacity</dt>

     <dd><input type="range" min="0" max="100" id="opacity_input_06" value="0" /><span id="opacity_value"></span>%</dd>

     <dt>saturate</dt>

     <dd><input type="range" min="0" max="1000" id="saturate_input_07" value="0" /><span id="saturate_value"></span>%</dd>

     <dt>sepia</dt>

     <dd><input type="range" min="0" max="100" id="sepia_input_08" value="0" /><span id="sepia_value"></span>%</dd>

     <dt>drop-shadow</dt>

     <dd>X:<input type="range" min="-100" max="100" id="shadow_x_input_09" value="0" /><span id="shadow_x_value"></span>px</dd>

     <dd>Y:<input type="range" min="-100" max="100" id="shadow_y_input_10" value="0" /><span id="shadow_y_value"></span>px</dd>

     <dd>radius:<input type="range" min="0" max="30" id="shadow_ra_input_11" value="0" /><span id="shadow_ra_value"></span>px</dd>

     <dd>R:<input type="range" min="0" max="255" id="shadow_r_input_12" value="0" /><span id="shadow_r_value"></span></dd>

     <dd>G:<input type="range" min="0" max="255" id="shadow_g_input_13" value="0" /><span id="shadow_g_value"></span></dd>

     <dd>B:<input type="range" min="0" max="255" id="shadow_b_input_14" value="0" /><span id="shadow_b_value"></span></dd>

     <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>

     <dd>

         <p id="show_code"></p>

     </dd>

 </dl>

 <img src="webkit-filter-pic.jpg" alt="一张来自爱·花苑的图片" id="show_pic" />

 <script type="text/javascript">

 window.onload = function() {

     var ctrl_box = document.getElementById("control");

     var filter_type = document.getElementsByTagName("input",ctrl_box);

     var filter_value = document.getElementsByTagName("span",ctrl_box);

     var shadow_ctrl = document.getElementById("shadow_ctrl");

     var show_p = document.getElementById("show_pic");

     var show_code = document.getElementById("show_code");

     var dw = "";

     var last = "";

     var resute = new Array();

     var num = new Array();

     var s_num = new Array();

     for (var i=0; i<=filter_type.length; i++){

         filter_value[i].innerHTML = filter_type[i].value;

         filter_type[i].onchange = function() {

             var filter_str = this.id.substring(-1, this.id.length - 9);

             var filter_id = parseInt(this.id.substr(-2,3));

             document.getElementById(filter_str + '_value').innerHTML = this.value;

             if (filter_str=="blur"){

                 dw = "px";

             }else if (filter_str=="hue-rotate"){

                 dw = "deg";

             }else if (filter_str=="shadow_x" || filter_str=="shadow_y" || filter_str=="shadow_ra"){

                 dw = "px";

             }else if (filter_str=="shadow_r" || filter_str=="shadow_g" || filter_str=="shadow_b" || filter_str=="shadow_a"){

                 dw = "";

             }else {

                 dw = "%";

             }

             resute[filter_id] = filter_str + "(" + this.value + dw + ")";

             if (filter_id >= 9){

                 resute[filter_id] = this.value + dw;

             }

             num[filter_id] = this.value;

             show_p.setAttribute("style",  "-webkit-filter:" + filter_str + "(" + this.value + dw + ")");

             this.onmousedown = function() {

                 last = "";

             }

             this.onmouseup = function() {

                 last = "";

                 for (var j=0; j<=filter_type.length; j++){

                     if (resute[j] == undefined){

                         resute[j] = "";

                     }

                     if (resute[j] != undefined && j>=9 && resute[j] != ""){

                         last = "drop-shadow(" + resute[9] + " " + resute[10] + " " + resute[11] + " " + "rgba(" + resute[12] + "," + resute[13] + "," + resute[14] + "," + resute[15] + ")) ";

                         show_p.setAttribute("style",  "-webkit-filter: " + last);

                         show_code.innerHTML = "-webkit-filter: " + last;

                     }

                 }

                 for (var j=0; j<9; j++){

                     if (resute[j] != undefined && num[j] != 0){

                         last += resute[j] + " ";

                         show_p.setAttribute("style",  "-webkit-filter: " + last);

                         show_code.innerHTML = "-webkit-filter: " + last;

                     }

                 }

             }

         }

     }

 }

 </script>

 </body>

 </html>

webkit图片滤镜的更多相关文章

filter 图片滤镜的各种设置
filter 图片滤镜给当前元素加滤镜_改变它的明亮度定义:filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度).作用在图片上或元素上.div{ },或 d ...
HTML5----CSS3图片滤镜(filter)特效
支持Chrome: 暂不支持浏览器:FF,IE... 希望后者努力效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFteXM=/font/5a ...
android全功能音乐播放器、基于MVP-Clean + Weex + RxJava2 + Retrofit + Dagger2 + MTRVA的综合应用、图片滤镜处理等源码
Android仿微信朋友圈查看图片下拽返回. Android图片滤镜处理,相机滤镜处理效果源码 Android自定义View源码:一个水平的进度条基于MVP-Clean + Weex + RxJav ...
Android 图片滤镜工具——高斯模糊
===================高斯模糊========================= 创建一个 ImageFilter 类(滤镜工具),代码如下: import android.graph ...
拍照图片滤镜sample
本文章主要介绍拍完照片后对图片的渲染进行处理可以对拍出的照片进行选择不同的滤镜,令在图片上附有编辑框,供大家对图片进行描述,这是一个可以手动拖动的编辑框,在这里主要介绍下,手指放到控件上什么情况下视 ...
用Canvas实现一些简单的图片滤镜
1.灰度滤镜对于灰度滤镜的实现一般有三种算法 1) 最大值法:即新的颜色值R=G=B=Max(R,G,B),通过这种方法处理后的图片看起来亮度值偏高. 2) 平均值法:即新的颜色值R=G=B=(R+ ...
聊下图片滤镜，手机上的，lookup table（颜色查找表
今天这里要介绍的是lookup table(颜色查找表),简而言之就是通过将每一个原始的颜色进行转换之后成为一个新的颜色. 打一个比方,比如原始颜色是红色(r:255,g:0,b:0),进行转换后变为 ...
css3图片滤镜
http://www.zhanxin.info/development/2012-12-19-css-filter.html
HTML5/CSS3鼠标滑过图片滤镜动画效果
在线演示本地下载

随机推荐

JAVA中的char类型
1.JAVA中,char占2字节,16位.可在存放汉字 2.char赋值 char a='a'; //任意单个字符,加单引号. char a='中';//任意单个中文字,加单引号. char a=1 ...
利用canvas制作乱跑的小球
canvas制作乱跑的小球说明:将下面的代码放到html的body就可以,键盘控制上(W)下(S)左(A)右(D) <body> <canvas id="canvas&q ...
chrome浏览器360浏览器图片无法加载提示等待可用套接字问题
前端时间遇到chrome,360浏览器无法加载图片问题,提示等待可用的套接字后来发现原因,原来是使用html5<video>标签时使用了默认的配置,默认情况下<video>标 ...
UIApplication 和 Appdelegate-----iOS
正文一 UIApplication 1.一个UIApplication代表是一个应用程序,而且是单例的.一个程序也只能有一个UIApplication对象 2.获取UIApplication对象: ...
PHP 代码审计代码执行注入
PHP 代码审计代码执行注入所谓的代码执行注入就是在php里面有些函数中输入的字符串参数会当做PHP代码执行. 如此的文章里面就大有文章可以探究了一常见的代码执行函数 Eval,assert, ...
itextsharp c# asp.net 生成 pdf 文件
一切的开始必须要有2个dll, 可以通过nuget 包xiazai, 关键字是itextsharp. using iTextSharp.text; using iTextSharp.text.pdf; ...
QTP11完美破解小笔记
相比Loadrunner的破解,QTP的应该会更简单,但是效果并没有Loadrunner的长久.QTP的破解只能维持30天,每30天需要再进行如下操作: 1.到C:\ProgramData目录下面去删 ...
从零开始搭建Salt Web之封装salt-api接口
salt-api现在已经正常运行,接下来则是实现通过调用salt-api来执行salt命令. 调用salt-api执行命令时,记得携带c_path参数因为salt中自带了tornado这个库,所以决 ...
利刃 MVVMLight 4：绑定和绑定的各种使用场景
一.绑定: 主要包含元素绑定和非元素绑定两种. 1.元素绑定,是绑定的最简单形式,源对象是WPF的元素,并且源对象的属性是依赖项属性. 根据我们之前的知识 ,依赖项属性具有内置的更改通知支持.所以当我 ...
删除bin后，Eclipse重新编译项目
今天做"用java.util.Properties类读写配置文件"Demo时,在编译项目时由于配置资源文件一起写入bin了.而Demo修改了配置文件,从新运行时配置文件不再更新,于 ...

webkit图片滤镜

webkit图片滤镜的更多相关文章

随机推荐

热门专题