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_监控工具jvisualvm
转:使用 VisualVM 进行性能分析及调优启动:jvisualvm 首先到JDK安装目录/bin目录下,双击jvisualvm.exe文件启动需要注意的是:当OS所在分区是FAT格式时,Vis ...
ODBC
ODBC是80年代末90年代初出现的技术,它为编写关系数据库的客户软件提供了统一的接口.ODBC只提供单一的API,可用于处理不同数据库的客户应用程序.使用ODBC API的应用程序可以与任何具有OD ...
Omi教程-组件通讯
组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点通过在组件上声明 data 传递给子节点父容器设置 childrenData ...
毕向东udp学习笔记3多线程聊天
项目功能: 实现了多线程下的发送接收,比较好希望可以加入GUI,类似聊天软件一样,有一个消息输入框,捕获输入消息,作为发送线程有一个显示消息框,接收消息并显示,作为接收线程不知道的是,当在线程中 ...
windows 下多版本nodejs切换 nvmw
以下教程不适用于nodejs v0.6.5及以下版本 nvmw 下载到本地 Git clone https://github.com/hakobera/nvmw.git 2.设置环境PATH 添加如上 ...
矢量切片（Vector tile）番外一：Proj4js
说明:番外篇是对正篇矢量切片(Vector tile)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...
Spring MVC 的环境搭建和入门小程序
1.1.下载spring框架包. 1.1.1百度搜索Spring Framework. 进入spring官网,在网页右边选择想要下载的版本.如图 1.1.2进入页面按Ctrl+F搜索Distribut ...
PHPCMS-后台管理中心
这个就是便捷管理网页,可以通过这个后台进行修改.增删一些东西,还可以利用一些网页模板来建立网页首先就是下载好这个后台管理中心,这个从网上下载就好了,记住这个要安装在WampServer中的www文件 ...
JAVA中的数据结构 - 真正的去理解红黑树
一, 红黑树所处数据结构的位置: 在JDK源码中, 有treeMap和JDK8的HashMap都用到了红黑树去存储红黑树可以看成B树的一种: 从二叉树看,红黑树是一颗相对平衡的二叉树二叉树--&g ...
C# 6 与 .NET Core 1.0 高级编程 - 40 ASP.NET Core（下）
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 40 章 ASP.NET Core(下)),不对的地方欢迎指出与交流. 章节出自<Professiona ...

webkit图片滤镜

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

随机推荐

热门专题