JavaScript 图片变换效果(ie only)

仿照常见的那个图片变换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();



    程序代码:

     

    Code



    下载完整程序
    ps:由于有些绿色版ie6会把滤镜功能去掉,所以用这类ie6会看不到效果的,用正宗版本就可以正常浏览了。

    其他图片展示效果:
    JavaScript 图片滑动展示效果
    JavaScript 图片切换展示效果

    posted @ 2008-05-23 12:02 cloudgamer 阅读(...) 评论(...) 编辑 收藏