JavaScript 图片变换效果(ie only)-阿里云开发者社区

开发者社区> 开发与运维> 正文

JavaScript 图片变换效果(ie only)

简介:

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

ebaaf727504dd9d3869e7ef63e7b37041ee5d404

程序说明:
图片未开始转换时,由于没有图片会显示一个红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();

程序代码:

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(thisthis.Stop);
    
this._img.onmouseout = Bind(thisthis.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(thisfunction(){ 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);
  }
};

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

本文转自博客园cloudgamer的博客,原文链接:JavaScript 图片变换效果(ie only),如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章