JavaScript圖片變換效果(IE only)

作者：cloudgamer 2012-06-01 10:12:39

變換之前先設置兩個參數Transition和Duration，分別是變換效果和持續時間，其中Duration是浮點數。此外還有兩個屬性Enabled和Percent分別是是否激活濾鏡和當前靜態濾鏡輸出在轉換進程中所處的點。

仿照常見的那個圖片變換flash做的效果，純js。不過濾鏡變換只對應ie，ff只能看到一般的切換。這個js做的效果最早在sina看到，這里把這個效果封裝好方便使用。

效果：

程序說明：

圖片未開始轉換時，由于沒有圖片會顯示一個紅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才能去掉鏈接，如果只設為空那么鏈接還是去不掉的。

#p#

使用說明：

首先要實例化一個對象：

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.51cto.com/files/uploadimg/20120601/1019570.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(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);  
  }  
};

下載完整程序

ps：由于有些綠色版ie6會把濾鏡功能去掉，所以用這類ie6會看不到效果的，用正宗版本就可以正常瀏覽了。

原文鏈接：http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html

【編輯推薦】

JavaScript馬賽克遮罩圖片幻燈片切換類
對開發者非常有用的JavaScript庫
網易郵箱前端JavaScript編碼規范
javascript解決圖片縮放及其優化
看JavaScript如何實現頁面自適

責任編輯：張偉來源： cloudgamer的博客

JavaScript