静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。


Posted in Javascript onMarch 06, 2007
请新建文件TestImage.html
注意:静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
欢迎与邀月交流,net技术与软件架构
内容如下,(可自行修改):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>测试图片效果</title> 
<style>... 
.Filter1 
{...}{ 
filter:Alpha(opacity=50,finishOpacity=80,style=0); 
} 
.Filter2 
{...}{ 
filter:FlipH; 
} 
.Filter3 
{...}{ 
filter:FlipV; 
} 
.Filter4 
{...}{ 
filter:Gray; 
} 
.Filter5 
{...}{ 
filter:Xray; 
} 
.Filter6 
{...}{ 
filter:Invert; 
} 
.Filter7 
{...}{ 
filter:Glow(color=#4A7AC9,strength=50); 
} 
.Filter8 
{...}{ 
filter:Shadow(color=#000000,direction=135); 
} 
.Filter9 
{...}{ 
filter:Dropshadow(color=#000000,offX=50,offY=50); 
} 
.Filter10 
{...}{ 
filter:Blur(direction=135); 
} 
.Filter11 
{...}{ 
filter:Wave(freq=7,strength=9,lightstrength=5,phase=5); 
} </style> 
</head> 
<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td>原图<br /></td> 
  </tr> 
  <tr> 
    <td><img  src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="原图" /></td> 
  </tr> 
  <tr> 
    <td><br /> 
      半透明<br /> 
opacity:开始处的透明度。<br /> 
finishOpacity:结束处的透明度。<br /> 
style:0为平均透明 1为线状透明 2为圆形透明 3为菱形透明<br /></td> 
  </tr> 
 <tr> 
    <td><img class="Filter1" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="" /></td> 
  </tr> 
  <tr> 
    <td><br /> 
      左右翻转<br /> 
</td> 
  </tr> 
  <tr> 
    <td><img class="Filter2" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="左右翻转" /></td> 
  </tr> 
   <tr> 
    <td><br /> 
     上下翻转<br /></td> 
  </tr> 
  <tr> 
    <td><img class="Filter3" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="上下翻转" /></td> 
  </tr> 
   <tr> 
    <td><br /> 
     灰度<br /></td> 
  </tr> 
  <tr> 
    <td><img class="Filter4" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="灰度" /></td> 
  </tr> 
   <tr> 
    <td><br /> 
     X光<br /></td> 
  </tr> 
  <tr> 
    <td><img class="Filter5" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="X光" /></td> 
  </tr> 
   <tr> 
    <td><br /> 
     色彩对换<br /></td> 
  </tr> 
  <tr> 
    <td><img class="Filter6" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="色彩对换" /></td> 
  </tr> 
   <tr> 
    <td><br /> 
      发光边框<br /> 
    color为发光颜色代码,strength是发光强度,滤镜宽=图宽+发光强度x2,滤镜高=图高+发光强度x2+10<br /></td> 
  </tr> 
  <tr> 
    <td><img class="Filter7" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="发光边框" /></td> 
  </tr> 
   <tr> 
    <td><br /> 
      投影边框<br /> 
color为发光颜色代码,direction表示方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+25,?V?高=图高+40<br /></td> 
  </tr> 
  <tr> 
    <td><img class="Filter8" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="投影边框" /></td> 
  </tr> 
   <tr> 
    <td><br /> 
      阴影边框<br /> 
color为发光颜色代码,offX表示水平位移offY表示垂直位移(可正可负),滤镜宽=图宽+水平位移绝对值+10,滤镜高=图高+垂直位移绝对值+2)<br /></td> 
  </tr> 
  <tr> 
    <td><img class="Filter9" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="阴影边框" /></td> 
  </tr> 
   <tr> 
    <td><br /> 
      模糊边框<br /> 
Direction表示方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+15,?V?高=图高+30<br /></td> 
  </tr> 
  <tr> 
    <td><img class="Filter10" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="模糊边框" /></td> 
  </tr> 
   <tr> 
    <td><br /> 
      波形边框<br /> 
    Freq表示波形频率(>0),strength表示振幅强度(>0),lightstrength表示波峰强度(0~100愈高越黑),phase表示起始相位(0~100),滤镜宽=图宽+振幅强度x2 
滤镜高=图高+振幅强度x2+10<br /></td> 
  </tr> 
<tr> 
    <td><img class="Filter11" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="波形边框" /></td> 
  </tr> 
   
</table> 
</body> 
</html>
 
效果如下:

静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。

Javascript 相关文章推荐
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
在JavaScript中使用timer示例
May 08 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
限制文本字节数js代码
Mar 06 #Javascript
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 #Javascript
HTML-CSS群中单选引发的“事件”
Mar 05 #Javascript
用javascript实现页面打印的三种方法
Mar 05 #Javascript
一个可以显示阴历的JS代码
Mar 05 #Javascript
JavaScript实现Sleep函数的代码
Mar 04 #Javascript
Javascript中暂停功能的实现代码
Mar 04 #Javascript
You might like
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
PHP7 标准库修改
2021/03/09 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
pandas中的series数据类型详解
2019/07/06 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
课程设计心得体会
2013/12/28 职场文书
成考报名单位证明范本
2014/01/16 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
房展策划方案
2014/06/07 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
项目合作意向书
2015/05/08 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
开业典礼致辞
2015/07/29 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫
python中filter,map,reduce的作用
2022/06/10 Python