<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<標題> RevealTrans </標題>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<風格>
內文{背景顏色：#CCCCCC;}
#container {寬度：525px；文字對齊：中心；邊距：0自動；}
#context {背景顏色：#777777；邊框：2px實線#555555；寬度：500px；}
#context img {邊框：無；邊距：0px；}
#nav {寬度：510px；高度：140px；溢出：隱藏；列表樣式：無；邊距頂部：3px；位置：相對； 左內邊距：0px；左邊距：3px}
#nav li {浮動：左；邊距：0 7px 4px 0；邊框：2px 實線#555；}
#nav div {寬度：90px；高度：60px；溢出：隱藏；}
#nav div img {寬度：95px;高度：60px;}
</風格>
<腳本>
/*!
* 揭示翻譯
* http://www.cnblogs.com/goodness2010/
*
* 版權所有 (c) 2009 GoodNess2010
* 日期：2009年1月13日（星期三）
*/
var $ = function(id) { return document.getElementById(id) };
var isIE = navigator.userAgent.indexOf('MSIE') != -1 ?真：假；
var $extend = function(a, b) { for(var c in b) { a[c] = b[c];返回一個； };
var forEach = 函數（數組，回調，thisp）{
if(array.forEach){
array.forEach(回呼, thisp);
}別的 {
for(var i = 0, len = array.length; i < len; i++) {
if(i in array)callback.call(thisp, array[i], i, array);
}
}
};
var RevealTrans = 函數(cId, 選項) {
this.cId = cId;
this.timer = null;
this.curImg = null;
this.index = 1;
$extend(this, this.setOptions(選項));
this.init();
};
RevealTrans.prototype = {
建構子：RevealTrans，
// 初始化函數
初始化：函數（）{
this.createStruct();
this.bindEvents();
},
// 設定預設參數
setOptions：函數（選項）{
這個.選項= {
auto: true, // 是否自動切換
transition: 23, // 過濾參數（參考說明）
period: 1.5, // 轉換過濾所用時間(單位為秒)
minOpa: 40, // 導覽圖片的初始透明度
maxOpa: 100, // 導覽圖片的最終透明度
暫停: 2000, //自動切換間隔時間
col: [], // 圖片集合
onEnd: function(){} // 圖片過濾轉換完成自訂函數
};
返回 $extend(this.options, 選項 || {});
},
// 產生HTML結構
建立結構：函數（）{
var _html = '', _this = 這個;
forEach(this.coll, 函數(O) {
_html += '<li><div><img src = ' + O + '></div></li>';
});
$(this.cId).innerHTML = _html;
$('context').innerHTML = '<img src=' + this.coll[0] + '>';
this.bindEvents();
},
// 設定透明度
setOpacity：函數（O，不透明度）{
if(!!isIE) O.style.filter = "alpha(opacity=" + opacity + ")";
否則 O.style.opacity = 不透明度 / 100;
},
// 綁定相關事件
綁定事件：函數（）{
var imgs = $(this.cId).getElementsByTagName('img'), _this = this;
forEach(imgs, 函數(O, 索引) {
指數 > 0 ? _this.setOpacity(O, _this.minOpa) : _this.curImg = O;
O.onmouseover = function() { this.style.cursor = '指針'; };
O._index = 索引；
O.onclick = function() { _this.onStart(this); _this.index = this._index;};
});
//預設示範第一張圖片
this.onStart(imgs[0]);
},
// 開始過濾切換
onStart: 函數(O) {
var _this = this, context = $('context').getElementsByTagName('img')[0];
_this.onStop();
_this.setOpacity(_this.curImg, _this.minOpa);_this.setOpacity(O, _this.maxOpa);
_this.curImg = O;
如果（是IE）{
context.style.filter = "revealTrans()";
_this.transFx(上下文);
}
context.setAttribute('src', O.getAttribute('src'));
//判斷是否自動切換
if(!!this.auto) {
var len = this.coll.length;
_this.timer = setTimeout(function(){
_this.index < len ? _this.index++ : _this.index = 1;
_this.onStart($(_this.cId).getElementsByTagName('img')[_this.index - 1]);
}, this.pause);
}
},
// 簡報
transFx: 函數(O) {
與（O.filters.revealTrans）{
轉換 = parseInt(this.transition, 10);持續時間 = parseFloat(this.duration);申請（）;玩（）;
}
},
// 清除定時器
onStop: 函數() {
清除間隔(this.timer);
}
};
</腳本>
</頭>
<正文>
<div id="容器">
<div id="context"></div>
<ul id="nav"></ul>
</div>
<腳本>
var revealTrans = new RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg']});
</腳本>
</正文>
</html>
[文字說明]
圖片切換：主要透過更改圖片的連結來切換對應的圖片。 如果設定了自動切換。
透明度設定：這個也很簡單。
過濾器設定：
RevealTrans是IE下的過濾器。
RevealTrans過濾器設定步驟：
1.context.style.filter = "revealTrans()"; // 將圖片filter屬性設定為revealTrans();
2.
與（O.filters.revealTrans）{
轉換 = parseInt(this.transition, 10); // 設定轉換參數
持續時間 = parseFloat(this.duration); // 設定轉換時間
申請（）;玩（）; // 設定過濾器並執行
}
其中Transition參數說明如下：
transition : 可選項。
1 : 擴展轉換。
2 : 圓形縮小轉換。
3 : 圓形轉換。
4 : 向上進食。
5 : 頂層。
6 : 向右。
7 : 向左帳篷。
8 : 縱向百葉窗轉換。
9 : 橫向百葉窗轉換。
10 : 西洋棋棋盤橫向轉換。
11 : 西洋棋盤縱向轉換。
12 : 隨機雜點幹擾轉換。
13 : 左右關門效果轉換。
14 : 左右開門效果轉換。
15 : 上下關門效果轉換。
16：上下開門效果轉換。
17 : 從右上角到左下角的鋸齒邊覆蓋效果轉換。
18 : 從右下角到左上角的鋸齒邊覆蓋效果轉換。
19 : 從左上角到右下角的鋸齒邊覆蓋效果轉換。
20 : 從左下角到右上角的鋸齒邊覆蓋效果轉換。
21 : 隨機橫線條轉換。
22：隨機向量線性轉換。
23：隨機使用上面可能的值轉換
共有24種過濾器。
持續時間參數：
持續時間 : 選用選項。
[程式碼使用]
new RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7. jpg', '8.jpg', '9.jpg', '10.jpg']});
其中第二項{}的設定可以對照我的setOptions的預設項進行自訂。 比如說你不想自動切換可以改為:
新 RevealTrans('nav', {
coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg' , '9.jpg', '10.jpg'],
自動：假
});
原始碼下載
自己的能力很有限。