<!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 ">
<tête>
<titre> RévélerTrans </titre>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
corps{couleur de fond : #CCCCCC;}
#container {largeur : 525 px ; text-align : center ; marge : 0 auto ;}
#context {couleur de fond : #777777 ; bordure : 2 px solide #555555 ; largeur : 500 px ;}
#context img {border: none;margin: 0px;}
#nav {largeur : 510 px ; hauteur : 140 px ; débordement : caché ; style de liste : aucun ; marge supérieure : 3 px ; position : relative ; remplissage-gauche : 0px ; marge gauche : 3px}
#nav li {float : gauche ; marge : 0 7px 4px 0 ; bordure : 2px solide #555 ;}
#nav div {largeur : 90 px ; hauteur : 60 px ; débordement : caché ;}
#nav div img {largeur : 95 px ; hauteur : 60 px ;}
</style>
<script>
/*!
* RévélerTrans
* 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 ? vrai : faux ;
var $étendre = function(a, b) { for(var c in b) { a[c] = b[c]; } renvoie un ; } ;
var forEach = fonction (tableau, rappel, thisp) {
si(array.forEach){
array.forEach(callback, thisp);
}autre {
for(var i = 0, len = array.length; i < len; i++) {
if(i in array) callback.call(thisp, array[i], i, array);
}
}
} ;
var RevealTrans = fonction (cId, options) {
this.cId = cId;
this.timer = null ;
this.curImg = null;
this.index = 1 ;
$extend(this, this.setOptions(options));
this.init();
} ;
RévélerTrans.prototype = {
constructeur : RevealTrans,
// 初始化函数
init : fonction() {
this.createStruct();
this.bindEvents();
},
// 设置默认参数
setOptions : fonction (options) {
ceci.options = {
auto: true, // 是否自动切换
transition : 23, // 滤镜参数(详见说明)
durée : 1,5, // 滤镜转换所用时间(单位为秒)
minOpa : 40, // 导航图片的初始透明度
maxOpa : 100, //
pause : 2000, // 自动切换间隔时间
coll: [], // 图片集合
onEnd : function(){} // Fonctionnalités de base
} ;
return $extend(this.options, options || {});
},
// Version HTML
createStruct : fonction() {
var _html = '', _this = ceci;
forEach(this.coll, fonction(O) {
_html += '<li><div><img src = ' + O + '></div></li>';
});
$(this.cId).innerHTML = _html;
$('context').innerHTML = '<img src=' + this.coll[0] + '>';
this.bindEvents();
},
// 设置透明度
setOpacity : fonction (O, opacité) {
if(!!isIE) O.style.filter = "alpha(opacity=" + opacité + ")";
sinon O.style.opacity = opacité / 100 ;
},
// 绑定相关事件
bindEvents : fonction() {
var imgs = $(this.cId).getElementsByTagName('img'), _this = this;
forEach (imgs, fonction (O, index) {
indice > 0 ? _this.setOpacity(O, _this.minOpa) : _this.curImg = O;
O.onmouseover = function() { this.style.cursor = 'pointeur'; } ;
O._index = index;
O.onclick = function() { _this.onStart(this); _this.index = this._index;};
});
// 默认演示第一个图Photo
this.onStart(imgs[0]);
},
// 开始滤镜切换
onStart : fonction (O) {
var _this = ceci, contexte = $('context').getElementsByTagName('img')(0];
_this.onStop();
_this.setOpacity(_this.curImg, _this.minOpa);_this.setOpacity(O, _this.maxOpa);
_this.curImg = O;
si (estIE) {
contexte.style.filter = "revealTrans()";
_this.transFx(contexte);
}
contexte.setAttribute('src', O.getAttribute('src'));
// 判断是否自动切换
si(!!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 : fonction (O) {
avec (O.filters.revealTrans) {
Transition = parseInt(this.transition, 10); Durée = parseFloat(this.duration); appliquer(); jouer();
}
},
// 清除时间戳
onStop : fonction() {
clearInterval(this.timer);
}
} ;
</script>
</tête>
<corps>
<div id="conteneur">
<div id="context"></div>
<ul id="nav"></ul>
</div>
<script>
var révélationTrans = 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>
</corps>
</html>
[文字说明]
Photo:主要通过更改图的链接. 如果设置了自动切换.就自动控制索引,如果达到最大值就重置为0.
Description : L'opacité est l'opacité.
滤镜设置:
RevealTrans IE 下 的 滤 镜. (flash).
RevealTrans propose des services :
1.context.style.filter = "revealTrans()"; // Filtrer les filtres et révélerTrans();
2.
avec (O.filters.revealTrans) {
Transition = parseInt(this.transition, 10); // 设置转换参数
Durée = parseFloat(this.duration); // 设置转换时间
appliquer(); jouer(); // 设置滤镜并执行
}
其中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种滤镜.et 23比较特殊可以随机样式.这里我默认使用的就是随机的.大家也可以根据自己的爱好去设置.
Durée :
durée : 可选项。浮点数(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']});
Il s'agit d'un ensemble d'options setOptions. 比如你不想自动切换则可以改为:
nouveau RevealTrans('nav', {
coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg' , '9.jpg', '10.jpg'],
automatique : faux
});
源码下载
Les fichiers CSS.CSS.和好的提议.希望大家指教.