JavaScript图片变换效果(IE only)

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

从事成都服务器托管，服务器租用，云主机，网络空间，域名注册，CDN，网络代维等服务。

效果：

[[77981]]

程序说明：

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

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

ps：以前我用this._img.src = "javascript:void(0);";但这个在ie8会出错。

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

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

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

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

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

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

除了这两个方法还有一个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");  
    2.

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

#p#

使用说明：

首先要实例化一个对象：

 
 
 
      
  
  
  1. var rvt = new RevealTrans("idPicShow");  
    2.

idPicShow就是显示变换的容器对象。

有以下这些可选参数和属性：

属性:默认值//说明

Auto:  true,//是否自动切换；Pause:  1000,//停顿时间(微妙)；Duration: 1,//变换持续时间(秒)；Transition: 23,//变换效果(23为随机)

List:  [],//数据集合,如果这里不设置可以用Add方法添加

onShow:  function(){}//变换时执行

其中List是数据集合，其中每个元素结构是这样的：

 
 
 
      
  
  
  1. { img: 图片url, text: 相关文本, url: 相关链接 } 
    2.

在使用时要注意，也可以在实例化之后用Add方法添加：

 
 
 
      
  
  
  1. rvt.Add('http://images.51cto.com/files/uploadimg/20120601/1019570.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');  
    2.   
  
  
  2.  
    3.

可以一个一个添加，这样方便后台用循环输出数据。

至于图片列表、按钮和文本显示区域是自己扩展的部分，详细请看实例。

全部设置完成后就可以用Start开始变换程序了：

 
 
 
      
  
  
  1. rvt.Start(); 
    2.

程序代码：

 
 
 
      
  
  
  1. var RevealTrans = Class.create();  
    2.   
  
  
  2. RevealTrans.prototype = {  
    3.   
  
  
  3.   initialize: function(container, options) {  
    4.   
  
  
  4.     this._img = document.createElement("img");  
    5.   
  
  
  5.     this._a = document.createElement("a");  
    6.   
  
  
  6.       
    7.   
  
  
  7.     this._timer = null;//计时器  
    8.   
  
  
  8.     this.Index = 0;//显示索引  
    9.   
  
  
  9.     this._onIndex = -1;//当前索引  
    10.   
  
  
  10.       
    11.   
  
  
  11.     this.SetOptions(options);  
    12.   
  
  
  12.       
    13.   
  
  
  13.     this.Auto = !!this.options.Auto;  
    14.   
  
  
  14.     this.Pause = Math.abs(this.options.Pause);  
    15.   
  
  
  15.     this.Duration = Math.abs(this.options.Duration);  
    16.   
  
  
  16.     this.Transition = parseInt(this.options.Transition);  
    17.   
  
  
  17.     this.List = this.options.List;  
    18.   
  
  
  18.     this.onShow = this.options.onShow;  
    19.   
  
  
  19.       
    20.   
  
  
  20.     //初始化显示区域  
    21.   
  
  
  21.     this._img.style.visibility = "hidden";//第一次变换时不显示红x图  
    22.   
  
  
  22.     this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0;  
    23.   
  
  
  23.     this._img.onmouseover = Bind(this, this.Stop);  
    24.   
  
  
  24.     this._img.onmouseout = Bind(this, this.Start);  
    25.   
  
  
  25.     isIE && (this._img.style.filter = "revealTrans()");  
    26.   
  
  
  26.       
    27.   
  
  
  27.     this._a.target = "_blank";  
    28.   
  
  
  28.       
    29.   
  
  
  29.     $(container).appendChild(this._a).appendChild(this._img);  
    30.   
  
  
  30.   },  
    31.   
  
  
  31.   //设置默认属性  
    32.   
  
  
  32.   SetOptions: function(options) {  
    33.   
  
  
  33.     this.options = {//默认值  
    34.   
  
  
  34.         Auto:        true,//是否自动切换  
    35.   
  
  
  35.         Pause:        1000,//停顿时间(微妙)  
    36.   
  
  
  36.         Duration:    1,//变换持续时间(秒)  
    37.   
  
  
  37.         Transition:    23,//变换效果(23为随机)  
    38.   
  
  
  38.         List:        [],//数据集合,如果这里不设置可以用Add方法添加  
    39.   
  
  
  39.         onShow:        function(){}//变换时执行  
    40.   
  
  
  40.     };  
    41.   
  
  
  41.     Extend(this.options, options || {});  
    42.   
  
  
  42.   },  
    43.   
  
  
  43.   Start: function() {  
    44.   
  
  
  44.     clearTimeout(this._timer);  
    45.   
  
  
  45.     //如果没有数据就返回  
    46.   
  
  
  46.     if(!this.List.length) return;  
    47.   
  
  
  47.     //修正Index  
    48.   
  
  
  48.     if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; }  
    49.   
  
  
  49.     //如果当前索引不是显示索引就设置显示  
    50.   
  
  
  50.     if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); }  
    51.   
  
  
  51.     //如果要自动切换  
    52.   
  
  
  52.     if(this.Auto){  
    53.   
  
  
  53.         this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause);  
    54.   
  
  
  54.     }  
    55.   
  
  
  55.   },  
    56.   
  
  
  56.   //显示  
    57.   
  
  
  57.   Show: function(list) {  
    58.   
  
  
  58.     if(isIE){  
    59.   
  
  
  59.         //设置变换参数  
    60.   
  
  
  60.         with(this._img.filters.revealTrans){  
    61.   
  
  
  61.             Transition = this.Transition; Duration = this.Duration; apply(); play();  
    62.   
  
  
  62.         }  
    63.   
  
  
  63.     }  
    64.   
  
  
  64.     this._img.style.visibility = "";  
    65.   
  
  
  65.     //设置图片属性  
    66.   
  
  
  66.     this._img.src = list.img; this._img.alt = list.text;  
    67.   
  
  
  67.     //设置链接  
    68.   
  
  
  68.     !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");  
    69.   
  
  
  69.     //附加函数  
    70.   
  
  
  70.     this.onShow();  
    71.   
  
  
  71.   },  
    72.   
  
  
  72.   //添加变换对象  
    73.   
  
  
  73.   Add: function(sIimg, sText, sUrl) {  
    74.   
  
  
  74.     this.List.push({ img: sIimg, text: sText, url: sUrl });  
    75.   
  
  
  75.   },  
    76.   
  
  
  76.   //停止  
    77.   
  
  
  77.   Stop: function() {  
    78.   
  
  
  78.     clearTimeout(this._timer);  
    79.   
  
  
  79.   }  
    80.   
  
  
  80. }; 
    81.

下载完整程序

ps：由于有些绿色版ie6会把滤镜功能去掉，所以用这类ie6会看不到效果的，用正宗版本就可以正常浏览了。

网站标题：JavaScript图片变换效果(IE only)
转载来源：http://www.mswzjz.cn/qtweb/news35/58785.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

虚拟主机知识

分类信息网站

成都小程序开发公司　　 　成都网站制作　　 　成都LED照明　　 　成都VI设计　　 　网页改版　　 　定制网站开发　　 　响应式网站建设　　 　UI设计　　 　网站制作公司　　 　复盛机电设备　　 　成都网站推广　　 　成都网站维护　　 　外贸网站设计方案　　 　四川國際商會　　 　手机微信网站　　 　网站维护　　 　胜锦安防科技　　 　成都网站设计　　 　成都网络公司　　 　普格博源建站