建站
咨詢
售后
建站咨詢
新聞中心
仿照常見的那個圖片變換flash做的效果，純js。不過濾鏡變換只對應(yīng)ie，ff只能看到一般的切換。這個js做的效果最早在sina看到，這里把這個效果封裝好方便使用。
從事成都服務(wù)器托管，服務(wù)器租用，云主機，網(wǎng)絡(luò)空間，域名注冊，CDN，網(wǎng)絡(luò)代維等服務(wù)。
效果：
[[77981]]
程序說明：
圖片未開始轉(zhuǎn)換時，由于沒有圖片會顯示一個紅x，所以隱藏圖片：
- this._img.style.visibility = "hidden";
ps：以前我用this._img.src = "javascript:void(0);";但這個在ie8會出錯。
這個變換效果需要濾鏡，所以只支持ie。要使用變換濾鏡，要先設(shè)置filter：
- this._img.style.filter = "revealTrans()"
變換之前先設(shè)置兩個參數(shù)Transition和Duration，分別是變換效果和持續(xù)時間，其中Duration是浮點數(shù)。
此外還有兩個屬性Enabled和Percent分別是是否激活濾鏡和當前靜態(tài)濾鏡輸出在轉(zhuǎn)換進程中所處的點。
設(shè)置完后還需要運行apply和play方法，分別是應(yīng)用變換效果和運行效果：
- with(this._img.filters.revealTrans){
- Transition = this.Transition; Duration = this.Duration; apply(); play();
- }
除了這兩個方法還有一個stop方法用來停止效果。
下面列出所有效果和對應(yīng)Transition值（參考手冊）：
值 : 效果
0 : 矩形收縮轉(zhuǎn)換。
1 : 矩形擴張轉(zhuǎn)換。
2 : 圓形收縮轉(zhuǎn)換。
3 : 圓形擴張轉(zhuǎn)換。
4 : 向上擦除。
5 : 向下擦除。
6 : 向右擦除。
7 : 向左擦除。
8 : 縱向百葉窗轉(zhuǎn)換。
9 : 橫向百葉窗轉(zhuǎn)換。
10 : 國際象棋棋盤橫向轉(zhuǎn)換。
11 : 國際象棋棋盤縱向轉(zhuǎn)換。
12 : 隨機雜點干擾轉(zhuǎn)換。
13 : 左右關(guān)門效果轉(zhuǎn)換。
14 : 左右開門效果轉(zhuǎn)換。
15 : 上下關(guān)門效果轉(zhuǎn)換。
16 : 上下開門效果轉(zhuǎn)換。
17 : 從右上角到左下角的鋸齒邊覆蓋效果轉(zhuǎn)換。
18 : 從右下角到左上角的鋸齒邊覆蓋效果轉(zhuǎn)換。
19 : 從左上角到右下角的鋸齒邊覆蓋效果轉(zhuǎn)換。
20 : 從左下角到右上角的鋸齒邊覆蓋效果轉(zhuǎn)換。
21 : 隨機橫線條轉(zhuǎn)換。
22 : 隨機豎線條轉(zhuǎn)換。
23 : 隨機使用上面可能的值轉(zhuǎn)換。
其中23比較特別，是隨機效果，程序默認就是隨機效果。
設(shè)置完濾鏡效果后就修改圖片的src就開始轉(zhuǎn)換了。
然后設(shè)置鏈接：
- !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");
要注意的是這里用removeAttribute去掉a的href才能去掉鏈接，如果只設(shè)為空那么鏈接還是去不掉的。
#p#
使用說明：
首先要實例化一個對象：
- var rvt = new RevealTrans("idPicShow");
idPicShow就是顯示變換的容器對象。
有以下這些可選參數(shù)和屬性：
屬性:默認值//說明
Auto: true,//是否自動切換；Pause: 1000,//停頓時間(微妙)；Duration: 1,//變換持續(xù)時間(秒)；Transition: 23,//變換效果(23為隨機)
List: [],//數(shù)據(jù)集合,如果這里不設(shè)置可以用Add方法添加
onShow: function(){}//變換時執(zhí)行
其中List是數(shù)據(jù)集合，其中每個元素結(jié)構(gòu)是這樣的：
- { img: 圖片url, text: 相關(guān)文本, url: 相關(guān)鏈接 }
在使用時要注意，也可以在實例化之后用Add方法添加：
- rvt.Add('http://images.51cto.com/files/uploadimg/20120601/1019570.jpg', '圖片變換效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
可以一個一個添加，這樣方便后臺用循環(huán)輸出數(shù)據(jù)。
至于圖片列表、按鈕和文本顯示區(qū)域是自己擴展的部分，詳細請看實例。
全部設(shè)置完成后就可以用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;
- //初始化顯示區(qū)域
- 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);
- },
- //設(shè)置默認屬性
- SetOptions: function(options) {
- this.options = {//默認值
- Auto: true,//是否自動切換
- Pause: 1000,//停頓時間(微妙)
- Duration: 1,//變換持續(xù)時間(秒)
- Transition: 23,//變換效果(23為隨機)
- List: [],//數(shù)據(jù)集合,如果這里不設(shè)置可以用Add方法添加
- onShow: function(){}//變換時執(zhí)行
- };
- Extend(this.options, options || {});
- },
- Start: function() {
- clearTimeout(this._timer);
- //如果沒有數(shù)據(jù)就返回
- if(!this.List.length) return;
- //修正Index
- if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; }
- //如果當前索引不是顯示索引就設(shè)置顯示
- 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){
- //設(shè)置變換參數(shù)
- with(this._img.filters.revealTrans){
- Transition = this.Transition; Duration = this.Duration; apply(); play();
- }
- }
- this._img.style.visibility = "";
- //設(shè)置圖片屬性
- this._img.src = list.img; this._img.alt = list.text;
- //設(shè)置鏈接
- !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");
- //附加函數(shù)
- this.onShow();
- },
- //添加變換對象
- Add: function(sIimg, sText, sUrl) {
- this.List.push({ img: sIimg, text: sText, url: sUrl });
- },
- //停止
- Stop: function() {
- clearTimeout(this._timer);
- }
- };
下載完整程序
ps：由于有些綠色版ie6會把濾鏡功能去掉，所以用這類ie6會看不到效果的，用正宗版本就可以正常瀏覽了。
網(wǎng)頁名稱：JavaScript圖片變換效果(IE only)
文章來源：http://www.5511xx.com/article/cdcpshc.html
