仿照常见的那个图片变换flash做的效果，纯js。不过滤镜变换只对应ie，ff只能看到一般的切换。这个js做的效果最早在sina看到，这里把这个效果封装好方便使用。
效果：
程序说明：
图片未开始转换时，由于没有图片会显示一个红x，所以隐藏图片：
this._img.style.visibility = “hidden”;
ps：以前我用this ._img.src =”javascript:void(0);”;但这个在ie8会出错。
这个变换效果需要滤镜，所以只支持ie。要使用变换滤镜，要先设置filter：
this ._img.style.filter =”revealTrans()”
变换之前先设置两个参数Transition和Duration，分别是变换效果和持续时间，其中Duration是浮点数。
此外还有两个属性Enabled和Percent分别是是否激活滤镜和当前静态滤镜输出在转换进程中所处的点。
设置完后还需要运行apply和play方法，分别是应用变换效果和运行效果：
with (this ._img.filters.revealTrans){
Transition =this .Transition; Duration =this .Duration; apply(); play();
}
除了这两个方法还有一个stop方法用来停止效果。
下面列出所有效果和对应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比较特别，是随机效果，程序默认就是随机效果。
设置完滤镜效果后就修改图片的src就开始转换了。
然后设置链接：
!!list[“url “]?(this ._a.href =list[“url “]) :this ._a.removeAttribute(“href “);
要注意的是这里用removeAttribute去掉a的href才能去掉链接，如果只设为空那么链接还是去不掉的。
使用说明：
首先要实例化一个对象：
var rvt =new RevealTrans(“idPicShow “);
idPicShow就是显示变换的容器对象。
有以下这些可选参数和属性：
属性:默认值//说明
Auto: true,//是否自动切换
Pause: 1000,//停顿时间(微妙)
Duration: 1,//变换持续时间(秒)
Transition: 23,//变换效果(23为随机)
List: [],//数据集合,如果这里不设置可以用Add方法添加
onShow: function(){}//变换时执行
其中List是数据集合，其中每个元素结构是这样的：
{ img: 图片url, text: 相关文本, url: 相关链接 }
在使用时要注意，也可以在实例化之后用Add方法添加：
rvt.Add(‘http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg ‘,’图片变换效果’,’http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html ‘);
可以一个一个添加，这样方便后台用循环输出数据。
至于图片列表、按钮和文本显示区域是自己扩展的部分，详细请看实例。
全部设置完成后就可以用Start开始变换程序了：
rvt.Start();
程序代码：
var RevealTrans =Class.create();
RevealTrans.prototype ={
initialize:function (container, options) {
this ._img =document.createElement(“img “);
this ._a =document.createElement(“a “);
this ._timer =null ;//计时器this .Index =0 ;//显示索引this ._onIndex =-1 ;//当前索引this .SetOptions(options);
this .Auto =!!this .options.Auto;
this .Pause =Math.abs(this .options.Pause);
this .Duration =Math.abs(this .options.Duration);
this .Transition =parseInt(this .options.Transition);
this .List =this .options.List;
this .onShow =this .options.onShow;
//初始化显示区域this ._img.style.visibility =”hidden “;//第一次变换时不显示红x图this ._img.style.width =this ._img.style.height =”100%”;this ._img.style.border =0 ;
this ._img.onmouseover =Bind(this ,this .Stop);
this ._img.onmouseout =Bind(this ,this .Start);
isIE &&(this ._img.style.filter =”revealTrans()”);
this ._a.target =”_blank “;
$(container).appendChild(this ._a).appendChild(this ._img);
},
//设置默认属性SetOptions:function (options) {
this .options ={//默认值Auto:true ,//是否自动切换Pause:1000 ,//停顿时间(微妙)Duration:1 ,//变换持续时间(秒)Transition:23 ,//变换效果(23为随机)List: [],//数据集合,如果这里不设置可以用Add方法添加onShow:function (){}//变换时执行};
Extend(this .options, options ||{});
},
Start:function () {
clearTimeout(this ._timer);
//如果没有数据就返回if (!this .List.length)return ;
//修正Index if (this .Index <0 ||this .Index >=this .List.length){this .Index =0 ; }
//如果当前索引不是显示索引就设置显示if (this ._onIndex !=this .Index){this ._onIndex =this .Index;this .Show(this .List[this .Index]); }
//如果要自动切换if (this .Auto){
this ._timer =setTimeout(Bind(this ,function (){this .Index ++;this .Start(); }),this .Duration *1000 +this .Pause);
}
},
//显示Show:function (list) {
if (isIE){
//设置变换参数with (this ._img.filters.revealTrans){
Transition =this .Transition; Duration =this .Duration; apply(); play();
}
}
this ._img.style.visibility =””;
//设置图片属性this ._img.src =list.img;this ._img.alt =list.text;
//设置链接!!list[“url “]?(this ._a.href =list[“url “]) :this ._a.removeAttribute(“href “);
//附加函数this .onShow();
},
//添加变换对象Add:function (sIimg, sText, sUrl) {
this .List.push({ img: sIimg, text: sText, url: sUrl });
},
//停止Stop:function () {
clearTimeout(this ._timer);
}
};
下载完整程序
;ps：由于有些绿色版ie6会把滤镜功能去掉，所以用这类ie6会看不到效果的，用正宗版本就可以正常浏览了。
其他图片展示效果：
JavaScript 图片滑动展示效果
JavaScript 图片切换展示效果
Original: https://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html
Author: cloudgamer
Title: JavaScript 图片变换效果(ie only)
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/535940/
转载文章受原作者版权保护。转载请注明原作者出处！