<!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 ">
<頭>
<title> RevealTrans </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<スタイル>
ボディ{背景色: #CCCCCC;}
#container {幅: 525px;テキスト配置: センター;マージン: 0 自動;}
#context {背景色: #777777;ボーダー: 2 ピクセルの実線 #555555;幅: 500 ピクセル;}
#context img {ボーダー: なし;マージン: 0px;}
#nav {幅: 510ピクセル;高さ: 140ピクセル;オーバーフロー: 非表示;リストスタイル: なし;マージントップ: 3ピクセル;位置: 相対; パディング左: 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 ? true : false;
var $extend = function(a, b) { for(var c in b) { a[c] = b[c];を返します。 };
var forEach = function(array, callback, thisp) {
if(array.forEach){
array.forEach(callback, thisp);
}それ以外 {
for(var i = 0, len = array.length; i < len; i++) {
if(配列内の i) 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 = {
コンストラクター: RevealTrans、
// 初初期化関数数
init: function() {
this.createStruct();
this.bindEvents();
}、
// 設置パラメータパラメータ
setOptions: 関数(オプション) {
this.options = {
auto: true, // 否か自動切换
transition: 23, // 滤镜パラメータ(详见说明)
duration: 1.5, // 滤镜转换使用時間(单位は秒)
minOpa: 40, // 导航图片の初期透明度
maxOpa: 100, // 导航图片の最终透明度
一時停止: 2000, // 自動切换間隔時間
coll: [], // 画像セット
onEnd: function(){} // 画像滤镜转换结束自定义関数数
};
return $extend(this.options, options || {});
}、
//HTML结构を生成
createStruct: function() {
var _html = ''、_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, 不透明度) {
if(!!isIE) O.style.filter = "alpha(opacity=" + opacity + ")";
それ以外の場合は O.style.opacity = 不透明度 / 100;
}、
// 绑定関連イベント
バインドイベント: function() {
var imgs = $(this.cId).getElementsByTagName('img'), _this = this;
forEach(imgs, function(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: function(O) {
var _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.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) {
with(O.filters.revealTrans) {
Transition = parseInt(this.transition, 10);期間 = parseFloat(this.duration);適用する（）;遊ぶ（）;
}
}、
// 清除時間间戳
onStop: function() {
clearInterval(this.timer);
}
};
</script>
</head>
<本文>
<div id="コンテナ">
<div id="context"></div>
<ul id="nav"></ul>
</div>
<スクリプト>
var cancelTrans = 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 およびその他のブラウザの不透明度だけが必要です。
滤镜設置場所:
RevealTrans は IE の下のセキュリティです。FF などでフィルタをサポートしていない場合、デバイスが効果を失う可能性があります (デバイスをまたぐ必要がある場合、この効果はフラッシュを考慮することができます)。
RevealTrans の設定手順:
1.context.style.filter = "revealTrans()"; // 画像フィルタのプロパティを revealTrans() に設定します。
2.
with(O.filters.revealTrans) {
Transition = parseInt(this.transition, 10); // 設置转换パラメータ
期間 = parseFloat(this.duration); // 設置转换時間
適用する（）;遊ぶ（）; // 設置滤镜并実行
}
その中のTransitionパラメータの説明は次のとおりです:
トランジション: 整数値 (整数) トランジションに使用する方式を設定または検索します。
1 : 四角形扠遷移。
2 : 丸形圧縮変換。
3 : 圆形扩张転。
4 : 向上した研磨。
5 : 方向下に擦る。
6 : 方向右擦り。
7 : 左方向に擦る。
8 : 方向百葉切り替え。
9 : 横方向百葉切り替え。
10 : 国象棋士の横方向転換。
11 : 国际象棋士の方向転換。
12 : 有機的なポイントの切り替え。
13 : 左右门効果転換。
14 : 左右门効果転換。
15 : 上下反転効果切り替え。
16 : 上下切り替え。
１７：右上角から左下角へのカバーリング効果の変化。
１８：右下角から左上角へのカバーリング効果の変化。
１９：左上角から右下角へのカバーリング効果の変化。
２０：左下角から右上角へのカバーリング効果の変化。
21 : 無作為横線条項切り替え。
22 : 無作為電線条項切替。
23 : 随机使用上面可能值转荢
共有 24 种滤镜。そのうち 23 比较特殊可以随机样式。ここ我默认使用的就是随机的。大家も自己的愛情好去置。
期間パラメータ:
持続時間: 選択可能。浮遊量(実数)。設定または検索の切り替えが完了するまでの時間。その値は秒.秒(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']});
この中の 2 番目の{}の設定は、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」]、
自動: false
});
ソースコードダウンロード
自己の能力很有限。CSS も很菜。目的は実践を通じて自己を蓄積することができる、ゆっくり進む。結果が不完全な和好の提議。希望大家指教。