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

随机推荐

tomcat catalina.sh JAVA_OPTS参数说明与配置
JVM的博客: http://blog.csdn.net/java2000_wl/article/category/1249100 http://blog.csdn.net/cutesource/ar ...
Vue框架Element的事件传递broadcast和dispatch方法分析
前言最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
HDU 3785 寻找大富翁
寻找大富翁 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
Top命名的一些简单用法
1. Top命令的显示 top 2. 按(Shift + O)是为了选择列进行排序.例如:按a是为了通过PID进行排序.然后按任意键返回主窗口. 3. 显示特定用户的进程. top -u hadoop ...
给ubuntu安装VNC远程桌面
(只有背景,没有菜单栏问题没有解决)Virtual Network Computing(VNC)是进行远程桌面控制的一个软件.客户端的键盘输入和鼠标操作通过网络传输到远程服务器,控制服务器的操作.服务 ...
Python求解登楼梯问题（京东2016笔试题）
问题:假设一段楼梯共15个台阶,小明一步最多能上3个台阶,那么小明上这段楼梯一共有多少种方法? 解析:从第15个台阶上往回看,有3种方法可以上来(从第14个台阶上一步迈1个台阶上来,从第13个台阶上一 ...
android学习18——对PathMeasure中getPosTan的理解
考虑这样的场景:要实现物体沿直接或曲线运动的效果.这就要算出某个时刻t,物体的坐标.getPosTan就是用来求坐标的.看下面的代码: float step = 0.0001f; Path path ...
读书笔记 effective c++ Item 7 在多态基类中将析构函数声明为虚析构函数
1. 继承体系中关于对象释放遇到的问题描述 1.1 手动释放关于时间记录有很多种方法,因此为不同的计时方法创建一个TimeKeeper基类和一些派生类就再合理不过了: class TimeKeepe ...
rips中如何使用PHP虚拟机自带函数--token_get_all
这两天在看rips源码,发现,它在审计php代码时调用了php虚拟机自带的token_get_all此函数. 这一函数会将php源码按照内置的规则进行归纳,并输出成数组格式. 如: <?php ...
初识Html:Html和CSS的关系
学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...

webkit图片滤镜

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

随机推荐

热门专题