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鼠标滑过图片滤镜动画效果
在线演示本地下载

随机推荐

Github+Hexo搭建静态博客
开始在安装hexo之前,必须确认你已经安装了Node.js和Git,并且注册了一个Github账号. 1.创建Github仓库 1) 仓库名为xxx.github.io 创建一个以"用户名 ...
Android Studio --“Cannot resolve symbol” 解决办法
鼠标放上去后显示 “Cannot resolve symbol XXX”,重启 Android Studio,重新 sync gradle,Clean build 都没有用. 多半是因为 Androi ...
xml类型转换列表显示 SQL查询
数据库中存在字段类型为xml 的数据, 现举例 xml 字段存储的数据为: <MortgageInfoShipList> <ITEMS> <ITEM> <Sh ...
【中文分词】结构化感知器SP
结构化感知器(Structured Perceptron, SP)是由Collins [1]在EMNLP'02上提出来的,用于解决序列标注的问题:中文分词工具THULAC.LTP所采用的理论模型便是基 ...
Spark 键值对RDD操作
键值对的RDD操作与基本RDD操作一样,只是操作的元素由基本类型改为二元组. 概述键值对RDD是Spark操作中最常用的RDD,它是很多程序的构成要素,因为他们提供了并行操作各个键或跨界点重新进行数 ...
RDLC系列(一)ASP.NET RDLC 报表自定义数据源
最近一段时间开发ERP系统中要用到不少报表打印,在网上找了一圈发现想些好用的报表控件大部分要收费,一些面免费要么不好用要么IE8不兼容,最后还是用了微软自带的RDLC报表,把自己遇到的坑和技巧整理分享 ...
C语言常见错误中英文对照表
C语言常见错误中英文对照表(网络搜索及经验积累不断更新中) 常见错误中英文对照表 fatal error C1003: error count exceeds number; stopping co ...
关于RunLoop
首先我们要先认识一下这个RunLoop; NSRunLoop是Cocoa框架中的类,与之的Core Fundation 中CFRunLoopRef类. 这两者的区别是,前者不是线程安全的,而后者是线程 ...
用JS常规方法是否离开当前页面
该方法在关闭页面时会提示 <script type="text/javascript"> var DispClose = true; function CloseE ...
asp.net core mvc剖析：mvc动作选择
一个http请求过来后,首先经过路由规则的匹配,找到最符合条件的的IRouter,然后调用IRouter.RouteAsync来设置RouteContext.Handler,最后把请求交给RouteC ...

webkit图片滤镜

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

随机推荐

热门专题