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基础知识点---equal，==，hashcode
1.==比较对象之间的地址是否相同 student a=new student(1); student b=new student(1); a==b false b=a; a==b true ...
AKKA学习笔记
AKKA学习笔记总结 01. AKKA 1. 介绍: Akka基于Actor模型,提供了一个用于构建可扩展的(Scalable).弹性的(Resilient).快速响应的(Responsive)应用程 ...
剖析Asp.Net Web API路由系统---WebHost部署方式
上一篇我们剖析了Asp.Net路由系统,今天我们再来简单剖析一下Asp.Net Web API以WebHost方式部署时,Asp.Net Web API的路由系统内部是怎样实现的.还是以一个简单实例开 ...
Apache Derby倒斗之路-01小道消息
1.DERBY是什么: Apache Derby 是IBM于2004年贡献给Apache软件基金会的数据库,于2005年正式成为开源项目,Derby作为一个基于JAVA的关系型数据库框架,他拥有许多便 ...
php上线教程----阿里云下设值二级域名并将项目上线
在工作中,我们需要在一个主机地址下分配多个域名来上线多个项目,但是怎么设置一个二级域名并且完成上线项目的,接下来我们就以阿里云为例演示整个上线流程首先登陆你的阿里云,找到你的域名点击解析,进入解析 ...
JavaScript实现按键精灵
最近有个需求,需要在页面上面自动点击.输入.提交. 用以模拟真实用户的操作行为,可以通过直接执行某个元素绑定的事件,来执行操作. 也可以创建事件,再派发事件,执行操作.关于事件的更多细节,可以参考&l ...
[solr] - solr5.2.1环境搭建 - 使用solr自带的jetty服务器
solr除了使用tomcat作为容器外,还可以使用其他的常用容器,比如jetty,jboos等,而且solr自身就自带jetty服务器,那么现在就solr自带的jetty服务器进行安装操作.由于sol ...
mycat
mycat系列: mycat系列-概述 Cobar的十个秘密之一 Cobar的十个秘密之二 Cobar的十个秘密之三 Cobar的十个秘密之四 Cobar的十个秘密之五 Cobar的十个秘密之六 Co ...
Windows Opengl ES 环境搭建
环境 OS:win7 专业版SP1 64位编译器: VS 2013 express 的cl 软件 windows上运行OpenGL ES要用到第三方的头文件,库文件和dll.下载地址 http:// ...
B/S架构与C/S架构的区别
C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可以充分利用两端硬件环境的优势. ...

webkit图片滤镜

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

随机推荐

热门专题