网络编程
位置:首页>> 网络编程>> JavaScript>> JavaScript 图片变换效果(ie only)(2)

JavaScript 图片变换效果(ie only)(2)

 来源:cloudgamer 发布时间:2010-01-20 12:40:00 

标签:变换,切换,图片,JavaScript

程序代码:


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);
  }
};

源码下载地址:RevealTrans.rar (2.68 KB)

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

来源

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com