CSS的RevealTrans动态滤镜

CSS的RevealTrans动态滤镜是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。　　

两个参数Transition和Duration，分别是变换效果和持续时间，其中Duration是浮点数。　　

此外还有两个属性Enabled和Percent分别是是否激活滤镜和当前静态滤镜输出在转换进程中所处的点。　　

设置完后还需要运行apply和play方法，分别是应用变换效果和运行效果　　

下面列出所有效果和对应Transition值（参考手册）：　　

值 : 效果　

0 : 矩形收缩转换。　　

1 : 矩形扩张转换。　　

2 : 圆形收缩转换。　　

3 : 圆形扩张转换。　　

4 : 向上擦除。　　

5 : 向下擦除。　　

6 : 向右擦除。　　

7 : 向左擦除。　　

8 : 纵向百叶窗转换。　　

9 : 横向百叶窗转换。　　

10 : 国际象棋棋盘横向转换。　　

11 : 国际象棋棋盘纵向转换。　　

12 : 随机杂点干扰转换。　　

13 : 左右关门效果转换。　　

14 : 左右开门效果转换。　　

15 : 上下关门效果转换。　　

16 : 上下开门效果转换。　　

17 : 从右上角到左下角的锯齿边覆盖效果转换。　　

18 : 从右下角到左上角的锯齿边覆盖效果转换。　　

19 : 从左上角到右下角的锯齿边覆盖效果转换。　　

20 : 从左下角到右上角的锯齿边覆盖效果转换。　　

21 : 随机横线条转换。　　

22 : 随机竖线条转换。　　

23 : 随机使用上面可能的值转换。　　

其中23比较特别，是随机效果，程序默认就是随机效果。　　

RevealTrans使用方法：style="FILTER: revealTrans(duration=2,transition=6)" 但是这个方法只对Ie有用，对firefox不起作用，

我们可以在javascript里面这样设置用以过滤掉firefox：　　

if(navigator.appName == "Microsoft Internet Explorer"){　　

   image.filters.revealTrans.Transition=23;　　

   image.filters.revealTrans.duration=10;　

}　　

这样，firefox依旧能正常执行以下语句。　　

或者，在火狐下添加IE tab plus插件 转化！　　

具体使用时要注意：　　

当你在网页中动态改变图片的连接地址时，请在地址改变前使用此滤镜。　　

这样，在页面的现实效果是，前一个图片会残留滤镜的作用时间，就像是新图片一点一点替换原图片一样。

http://blog.163.com/zjlovety@126/blog/static/22418624201192191012101/

例子：

<script language="JavaScript">
<!--
function objSP_Article() {this.ImgUrl=""; this.LinkUrl=""; this.Title="";}
function SlidePic_Article(_id) {this.ID=_id; this.Width=0;this.Height=0; this.TimeOut=5000; this.Effect=23; this.TitleLen=0; this.PicNum=-1; this.Img=null; this.Url=null; this.Title=null; this.AllPic=new Array(); this.Add=SlidePic_Article_Add; this.Show=SlidePic_Article_Show; this.LoopShow=SlidePic_Article_LoopShow;}
function SlidePic_Article_Add(_SP) {this.AllPic[this.AllPic.length] = _SP;}
function SlidePic_Article_Show() {
  if(this.AllPic[0] == null) return false;
  document.write("<div align='center'><a id='Url_" + this.ID + "' href=''><img id='Img_" + this.ID + "' style='width:" + this.Width + "; height:" + this.Height + "; filter: revealTrans(duration=2,transition=23);' src='javascript:null' border='0'></a>");
  if(this.TitleLen != 0) document.write("<br><span id='Title_" + this.ID + "'></span></div>");
  this.Img = document.getElementById("Img_" + this.ID);
  this.Url = document.getElementById("Url_" + this.ID);
  this.Title = document.getElementById("Title_" + this.ID);
  this.LoopShow();
}
function SlidePic_Article_LoopShow() {
  if(this.PicNum<this.AllPic.length-1) this.PicNum++ ; 
  else this.PicNum=0; 
  this.Img.filters.revealTrans.Transition=this.Effect; 
  this.Img.filters.revealTrans.apply(); 
  this.Img.src=this.AllPic[this.PicNum].ImgUrl;
  this.Img.filters.revealTrans.play();
  this.Url.href=this.AllPic[this.PicNum].LinkUrl;
  if(this.Title) this.Title.innerHTML="<a href="+this.AllPic[this.PicNum].LinkUrl+" target=_blank>"+this.AllPic[this.PicNum].Title+"</a>";
  this.Img.timer=setTimeout(this.ID+".LoopShow()",this.TimeOut);
}
//-->
</script>
<script language=JavaScript>
var SlidePic_937 = new SlidePic_Article("SlidePic_937");
SlidePic_937.Width    = 210;
SlidePic_937.Height   = 170;
SlidePic_937.TimeOut  = 5000;
SlidePic_937.Effect   = 23;
SlidePic_937.TitleLen = 20;
var oSP = new objSP_Article();
oSP.ImgUrl         = "/Article/UploadFiles/201301/20130118145447680.jpg";
oSP.LinkUrl        = "/Article/ShowArticle.asp?ArticleID=5491";
oSP.Title         = "我校志愿服务队到东城";
SlidePic_937.Add(oSP);
var oSP = new objSP_Article();
oSP.ImgUrl         = "/Article/UploadFiles/201301/20130115143413232.jpg";
oSP.LinkUrl        = "/Article/ShowArticle.asp?ArticleID=5490";
oSP.Title         = "校园吉尼斯之跳绳比赛";
SlidePic_937.Add(oSP);
var oSP = new objSP_Article();
oSP.ImgUrl         = "/Article/UploadFiles/201301/20130109145230722.jpg";
oSP.LinkUrl        = "/Article/ShowArticle.asp?ArticleID=5489";
oSP.Title         = "2013实验小学迎新文艺";
SlidePic_937.Add(oSP);
var oSP = new objSP_Article();
oSP.ImgUrl         = "/Article/UploadFiles/201212/20121224221008126.jpg";
oSP.LinkUrl        = "/Article/ShowArticle.asp?ArticleID=5486";
oSP.Title         = "“预防犯罪与自我保护";
SlidePic_937.Add(oSP);
SlidePic_937.Show();
//-->
</script>

直接放在body里面就ok了，注意图片路径

注意：ie6不支持滤镜，js里面只要有filters就执行不了，在IE6下显示错误,还提示,类不能支持automation操作 line 203 char 3
是这行  this.Img.filters.revealTrans.play(); 这是GetSlidePicArticle标签生成的