静态图片的十一种滤镜效果--不支持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入门教程(12) js对象化编程
Jan 31 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
node.js入门教程
Jun 01 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
js图片处理示例代码
2014/05/12 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
详解webpack+express多页站点开发
2017/12/22 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
python 实现控制鼠标键盘
2020/11/27 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
银行工作检查书范文
2014/01/31 职场文书
客服部班长工作责任制
2014/02/25 职场文书
销售类求职信
2014/06/13 职场文书
大雁塔导游词
2015/02/04 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书