图片切换(滤镜IE Only)

http://ww***.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://ww***.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://ww***.org/1999/xhtml">http://ww***.org/1999/xhtml">

 
 
 
 

[文字说明]

图片切换:主要通过更改图片的链接.切换相应的图片. 如果设置了自动切换.就自动控制索引,如果达到最大值就重置为0.

透明度设置: 这个也很简单.只要区别IE和其他浏览器的opacity就可以了.

滤镜设置:

RevealTrans是IE下的滤镜.很可惜在FF等不支持滤镜的浏览器会失去效果.(如果需要跨浏览器的这种效果可以考虑flash).

RevealTrans滤镜设置步骤:

1.co***xt.style.filter = "revealTrans()"; // 将图片filter属性设置为revealTrans();
2.
with(O.***ters.revealTrans) {
    Transition = parseInt(th***transition, 10);  // 设置转换参数
    Duration = parseFloat(th***duration);        // 设置转换时间
    apply(); play();                             // 设置滤镜并执行
}

其中Transition参数说明如下:

transition  :　 可选项。整数值(Integer)。设置或检索转换所使用的方式。 0  :　 矩形收缩转换。
1  :　 矩形扩张转换。
2  :　 圆形收缩转换。
3  :　 圆形扩张转换。
4  :　 向上擦除。
5  :　 向下擦除。
6  :　 向右擦除。
7  :　 向左擦除。
8  :　 纵向百叶窗转换。
9  :　 横向百叶窗转换。
10  :　 国际象棋棋盘横向转换。
11  :　 国际象棋棋盘纵向转换。
12  :　 随机杂点干扰转换。
13  :　 左右关门效果转换。
14  :　 左右开门效果转换。
15  :　 上下关门效果转换。
16  :　 上下开门效果转换。
17  :　 从右上角到左下角的锯齿边覆盖效果转换。
18  :　 从右下角到左上角的锯齿边覆盖效果转换。
19  :　 从左上角到右下角的锯齿边覆盖效果转换。
20  :　 从左下角到右上角的锯齿边覆盖效果转换。
21  :　 随机横线条转换。
22  :　 随机竖线条转换。
23  :　 随机使用上面可能的值转换

共有24种滤镜.其中23比较特殊可以随机样式.这里我默认使用的就是随机的.大家也可以根据自己的爱好去设置.

Duration参数:

duration  :　 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式

[代码使用]

new RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg']});

其中第二项{}的设置可以对照我的setOptions的默认项进行自定义. 比如你不想自动切换则可以改为:

         new RevealTrans('nav', {
                                    coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'],
                                    auto: false
                                });
源码下载

自己的能力很有限.CSS也很菜.目的就是通过实践能够积累自己的经验,慢慢进步.如果有不妥的和好的提议.希望大家指教.