静态图片的十一种滤镜效果--不支持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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php的一些小问题
2010/07/03 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php生成excel文件的简单方法
2014/02/08 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
ajax异步请求详解
2017/01/06 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
详解Python中的循环语句的用法
2015/04/09 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python爬取内容存入Excel实例
2019/02/20 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
迟到检讨书900字
2014/01/14 职场文书
销售会计岗位职责
2014/03/15 职场文书
校运会加油稿大全
2015/07/22 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书