演示：http://dl.dropbox.com/u/3362522/UI/RevealTrans/RevealTrans.Html
<!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">
<head>
<title> RevealTrans </title>
<meta http-equiv="Content-Type" content="text/Html; charset=utf-8" />
<style>
body{background-color: #CCCCCC;}
#container {width: 525px;text-align: center;margin: 0 auto;}
#context {background-color: #777777;border: 2px solid #555555;width: 500px;}
#context img {border: none;margin: 0px;}
#nav {width: 510px;height: 140px;overflow: hidden;list-style: none;margin-top: 3px;position: relative; padding-left: 0px; margin-left:3px}
#nav li {float: left; margin: 0 7px 4px 0;border: 2px solid #555;}
#nav div {width: 90px;height: 60px; overflow: hidden;}
#nav div img {width: 95px;height: 60px;}
</style>
<script>
/*!
* RevealTrans
* http://www.cnblogs.com/goodness2010/
*
* Copyright (c) 2009 GoodNess2010
* Date: 2009-1-13 (星期三)
*/
var $ = function(id) { return document.getElementById(id) };
var isIE = navigator.userAgent.indexOf('MSIE') != -1 ? true : false;
var $extend = function(a, b) { for(var c in b) { a[c] = b[c]; } return a; };
var forEach = function(array, callback, thisp) {
if(array.forEach){
array.forEach(callback, thisp);
}else {
for(var i = 0, len = array.length; i < len; i++) {
if(i in array) callback.call(thisp, array[i], i, array);
}
}
};
var RevealTrans = function(cId, options) {
this.cId = cId;
this.timer = null;
this.curImg = null;
this.index = 1;
$extend(this, this.setOptions(options));
this.init();
};
RevealTrans.prototype = {
constructor: RevealTrans,
// 初始化函數
init: function() {
this.createStruct();
this.bindEvents();
},
// 設置默認參數
setOptions: function(options) {
this.options = {
auto: true, // 是否自動切換
transition: 23, // 濾鏡參數(詳見說明)
duration: 1.5, // 濾鏡轉換所用時間(單位為秒)
minOpa: 40, // 導航圖片的初始透明度
maxOpa: 100, // 導航圖片的最終透明度
pause: 2000, // 自動切換間隔時間
coll: [], // 圖片集合
onEnd: function(){} // 圖片濾鏡轉換結束自定義函數
};
return $extend(this.options, options || {});
},
// 生成Html結構
createStruct: function() {
var _Html = '',
_this = this;
forEach(this.coll, function(O) {
_Html += '<li><div><img src = ' + O + '></div></li>';
});
$(this.cId).innerHTML = _Html;
$('context').innerHtml = '<img src=' + this.coll[0] + '>';
this.bindEvents();
},
// 設置透明度
setOpacity: function(O, opacity) {
if(!!isIE) O.style.filter = "alpha(opacity=" + opacity + ")";
else O.style.opacity = opacity / 100;
},
// 綁定相關事件
bindEvents: function() {
var imgs = $(this.cId).getElementsByTagName('img'), _this = this;
forEach(imgs, function(O, index) {
index > 0 ? _this.setOpacity(O, _this.minOpa) : _this.curImg = O;
O.onmouSEOver = function() { this.style.cursor = 'pointer'; };
O._index = index;
O.onclick = function() { _this.onStart(this); _this.index = this._index;};
});
// 默認演示第一個圖片
this.onStart(imgs[0]);
},
// 開始濾鏡切換
onStart: function(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;
if(isIE) {
context.style.filter = "revealTrans()";
_this.transFx(context);
}
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: function(O) {
with(O.filters.revealTrans) {
Transition = parseInt(this.transition, 10); Duration = parseFloat(this.duration); apply(); play();
}
},
// 清除時間戳
onStop: function() {
clearInterval(this.timer);
}
};
</script>
</head>
<body>
<div id="container">
<div id="context"></div>
<ul id="nav"></ul>
</div>
<script>
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']});
</script>
</body>
</Html>
[文字說明]
圖片切換:主要通過更改圖片的鏈接.切換相應的圖片. 如果設置了自動切換.就自動控制索引,如果達到最大值就重置為0.
透明度設置:這個也很簡單.只要區別IE和其他浏覽器的opacity就可以了.
濾鏡設置:
RevealTrans是IE下的濾鏡.很可惜在FF等不支持濾鏡的浏覽器會失去效果.(如果需要跨浏覽器的這種效果可以考慮Flash).
RevealTrans濾鏡設置步驟:
1.context.style.filter = "revealTrans()"; // 將圖片filter屬性設置為revealTrans();
2.
with(O.filters.revealTrans) {
Transition = parseInt(this.transition, 10); // 設置轉換參數
Duration = parseFloat(this.duration); // 設置轉換時間
apply(); play(); // 設置濾鏡並執行
}
其中Transition參數說明如下:
transition : 可選項。整數值(Integer)。設置或檢索轉換所使用的方式。
0 : 矩形收縮轉換。
1 : 矩形擴張轉換。
2 : 圓形收縮轉換。
3 : 圓形擴張轉換。
4 : 向上擦除。
5 : 向下擦除。
6 : 向右擦除。
7 : 向左擦除。
8 : 縱向百葉窗轉換。
9 : 橫向百葉窗轉換。
10 : 國際象棋棋盤橫向轉換。
11 : 國際象棋棋盤縱向轉換。
12 : 隨機雜點干擾轉換。
13 : 左右關門效果轉換。
14 : 左右開門效果轉換。
15 : 上下關門效果轉換。
16 : 上下開門效果轉換。
17 : 從右上角到左下角的鋸齒邊覆蓋效果轉換。
18 : 從右下角到左上角的鋸齒邊覆蓋效果轉換。
19 : 從左上角到右下角的鋸齒邊覆蓋效果轉換。
20 : 從左下角到右上角的鋸齒邊覆蓋效果轉換。
21 : 隨機橫線條轉換。
22 : 隨機豎線條轉換。
23 : 隨機使用上面可能的值轉換
共有24種濾鏡.其中23比較特殊可以隨機樣式.這裡我默認使用的就是隨機的.大家也可以根據自己的愛好去設置.
Duration參數:
duration : 可選項。浮點數(Real)。設置或檢索轉換完成所用的時間。其值為秒.毫秒(0.0000)格式
[代碼使用]
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的默認項進行自定義. 比如你不想自動切換則可以改為:
new RevealTrans('nav', {
coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'],
auto: false
});
自己的能力很有限.CSS也很菜.目的就是通過實踐能夠積累自己的經驗,慢慢進步.如果有不妥的和好的提議.希望大家指教
本文示例源代碼或素材下載
