JavaScript图片变换效果(IE only)

yibin 2015-02-09 建站源码 605

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



效果:

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

双击代码全选
1

2
<pre class="brush:js;toolbar:false;">this._img.style.visibility = "hidden";</pre><p>

</p>


 

ps:以前我用this._img.src = "javascript:void(0);";但这个在ie8会出错。
这个变换效果需要滤镜,所以只支持ie。要使用变换滤镜,要先设置filter:
双击代码全选
1

2
<pre class="brush:js;toolbar:false;">this._img.style.filter = "revealTrans()"</pre><p>

</p>


 

变换之前先设置两个参数Transition和Duration,分别是变换效果和持续时间,其中Duration是浮点数。
此外还有两个属性Enabled和Percent分别是是否激活滤镜和当前静态滤镜输出在转换进程中所处的点。
设置完后还需要运行apply和play方法,分别是应用变换效果和运行效果:
双击代码全选
1

2

3
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就开始转换了。
然后设置链接
双击代码全选
1 !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");


 
要注意的是这里用removeAttribute去掉a的href才能去掉链接,如果只设为空那么链接还是去不掉的。
使用说明:
首先要实例化一个对象:
双击代码全选
1

2
<pre class="brush:js;toolbar:false;">var rvt = new RevealTrans("idPicShow");</pre><p>

</p>


 

idPicShow就是显示变换的容器对象。
有以下这些可选参数和属性:
属性:默认值//说明
Auto:  true,//是否自动切换;Pause:  1000,//停顿时间(微妙);Duration: 1,//变换持续时间(秒);Transition: 23,//变换效果(23为随机)
List:  [],//数据集合,如果这里不设置可以用Add方法添加
onShow:  function(){}//变换时执行
其中List是数据集合,其中每个元素结构是这样的:
双击代码全选
1 { img: 图片url, text: 相关文本, url: 相关链接 }


 
在使用时要注意,也可以在实例化之后用Add方法添加:
双击代码全选
1

2

3
<pre class="brush:js;toolbar:false;">rvt.Add('http://images.51cto.com/files/uploadimg/20120601/1019570.jpg',

'图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');</pre><p>

</p>


 

可以一个一个添加,这样方便后台用循环输出数据。
至于图片列表、按钮和文本显示区域是自己扩展的部分,详细请看实例。



全部设置完成后就可以用Start开始变换程序了:
双击代码全选
1

2
<pre class="brush:js;toolbar:false;">rvt.Start();</pre><p>

</p>


 

程序代码:
双击代码全选
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83
<pre class="brush:js;toolbar:false;">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); 

  

};</pre><p>

</p>


 

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

扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询