0 Comments

JavaScript图片变换效果(IE only)(1)

发布于:2014-03-08  |   作者:广州网站建设  |   已聚集:人围观

仿照常见的那个图片变换flash做的效果,纯js。不过滤镜变换只对应ie,ff只能看到一般的切换。这个js做的效果最早在sina看到,这里把这个效果封装好方便使用。

效果:

程序说明:

图片未开始转换时,由于没有图片会显示一个红x,所以隐藏图片:


  1. this._img.style.visibility = "hidden"

ps:以前我用this._img.src = "javascript:void(0);";但这个在ie8会出错。
广州网站建设,网站建设,广州网页设计,广州网站设计

这个变换效果需要滤镜,所以只支持ie。要使用变换滤镜,要先设置filter:


  1. this._img.style.filter = "revealTrans()" 

变换之前先设置两个参数Transition和Duration,分别是变换效果和持续时间,其中Duration是浮点数。

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

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


  1. with(this._img.filters.revealTrans){  
  2.     Transition = this.Transition; Duration = this.Duration; apply(); play();  
  3. }  

除了这两个方法还有一个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就开始转换了。

然后设置链接:


  1. !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");  

要注意的是这里用removeAttribute去掉a的href才能去掉链接,如果只设为空那么链接还是去不掉的。

 

飞机