JavaScript图片变换效果..docVIP

JavaScript 图片变换效果(ie only) 仿照常见的那个图片变换flash做的效果，纯js。不过滤镜变换只对应ie，ff只能看到一般的切换。这个js做的效果最早在sina看到，这里把这个效果封装好方便使用。效果： 1 2 3 图片切换展示效果 程序说明：图片未开始转换时，由于没有图片会显示一个红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(/cnblogs_com/cloudgamer/143727/r_rt_1.jpg,?图片变换效果,?/cloudgamer/archive/2008/05/23/1205642.html); 可以一个一个添加，这样方便后台用循环输出数据。 至于图片列表、按钮和文本显示区域是自己扩展的部分，详细请看实例。全部设置完成后就可以用Start开始变换程序了： rvt.Start(); 程序代码： ? Codevar?RevealTrans?=?Class.create();RevealTtotype?=?{??initialize:?function(container,?options)?{????this._img?=?document.createElement(img);????this._a