JavaScript圖片變換效果(IE only)
仿照常見的那個圖片變換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
【編輯推薦】
