<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza>
<título> RevelarTrans </título>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<estilo>
cuerpo {color de fondo: #CCCCCC;}
#contenedor {ancho: 525px; alineación de texto: centro; margen: 0 automático;}
#context {color de fondo: #777777; borde: 2px sólido #555555; ancho: 500px;}
#context img {borde: ninguno;margen: 0px;}
#nav {ancho: 510 px; alto: 140 px; desbordamiento: oculto; estilo de lista: ninguno; margen superior: 3 px; posición: relativa; relleno-izquierda: 0px; margen izquierdo: 3px}
#nav li {flotador: izquierda; margen: 0 7px 4px 0;borde: 2px sólido #555;}
#nav div {ancho: 90 px; alto: 60 px; desbordamiento: oculto;}
#nav div img {ancho: 95px;alto: 60px;}
</estilo>
<guión>
/*!
* RevelarTrans
* http://www.cnblogs.com/goodness2010/
*
* Copyright (c) 2009 GoodNess2010
* Fecha: 2009-1-13 (星期三)
*/
var $ = función(id) { return document.getElementById(id) };
var isIE = navigator.userAgent.indexOf('MSIE') != -1 ? verdadero: falso;
var $extender = función(a, b) { para(var c en b) { a[c] = b[c]; } devolver un; };
var para cada uno = función (matriz, devolución de llamada, thisp) {
si (matriz.para cada uno) {
array.forEach(devolución de llamada, thisp);
}demás {
for(var i = 0, len = array.length; i < len; i++) {
if(i en matriz) callback.call(thisp, matriz[i], i, matriz);
}
}
};
var RevealTrans = función(cId, opciones) {
this.cId = cId;
this.timer = nulo;
this.curImg = nulo;
este.índice = 1;
$extend(esto, this.setOptions(opciones));
this.init();
};
RevelarTrans.prototipo = {
constructor: RevelarTrans,
// 初始化函数
inicio: función() {
this.createStruct();
this.bindEvents();
},
// 设置默认参数
setOptions: función(opciones) {
estas.opciones = {
auto: verdadero, // 是否自动切换
transición: 23, // 滤镜参数(详见说明)
duración: 1.5, // 滤镜转换所用时间(单位为秒)
minOpa: 40, // 导航图片的初始透明度
maxOpa: 100, // 导航图片的最终透明度
pausa: 2000, // 自动切换间隔时间
coll: [], // 图片集合
onEnd: function(){} // 图片滤镜转换结束自定义函数
};
return $extend(this.opciones, opciones || {});
},
// 生成HTML结构
crearEstructura: función() {
var _html = '', _this = esto;
para cada uno (este.coll, función (O) {
_html += '<li><div><img src = ' + O + '></div></li>';
});
$(this.cId).innerHTML = _html;
$('context').innerHTML = '<img src=' + this.coll[0] + '>';
this.bindEvents();
},
// 设置透明度
setOpacidad: función(O, opacidad) {
if(!!isIE) O.style.filter = "alpha(opacidad=" + opacidad + ")";
else O.style.opacity = opacidad / 100;
},
// 绑定相关事件
enlazarEventos: función() {
var imgs = $(this.cId).getElementsByTagName('img'), _this = esto;
para cada (imgs, función (O, índice) {
índice > 0 ? _this.setOpacity(O, _this.minOpa): _this.curImg = O;
O.onmouseover = function() { this.style.cursor = 'puntero'; };
O._index = índice;
O.onclick = function() { _this.onStart(esto); _this.index = this._index;};
});
// 默认演示第一个图片
this.onStart(imgs[0]);
},
// 开始滤镜切换
al iniciar: función (O) {
var _this = esto, contexto = $('context').getElementsByTagName('img')[0];
_this.onStop();
_this.setOpacity(_this.curImg, _this.minOpa);_this.setOpacity(O, _this.maxOpa);
_this.curImg = O;
si (es IE) {
context.style.filter = "revelarTrans()";
_this.transFx(contexto);
}
context.setAttribute('src', O.getAttribute('src'));
// 判断是否自动切换
si(!!este.auto) {
var len = this.coll.length;
_this.timer = setTimeout(función(){
_this.index <len? _this.index++ : _this.index = 1;
_this.onStart($(_this.cId).getElementsByTagName('img')[_this.index - 1]);
}, esta.pausa);
}
},
// 滤镜演示
transFx: función(O) {
con(O.filters.revealTrans) {
Transición = parseInt(this.transition, 10); Duración = parseFloat(this.duration); aplicar(); jugar();
}
},
// 清除时间戳
onStop: función() {
clearInterval(este.temporizador);
}
};
</script>
</cabeza>
<cuerpo>
<div id="contenedor">
<div id="contexto"></div>
<ul id="nav"></ul>
</div>
<guión>
var revelarTrans = nuevo RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg']});
</script>
</cuerpo>
</html>
[文字说明]
图片切换:主要通过更改图片的链接.切换相应的图片. 如果设置了自动切换.就自动控制索引,如果达到最大值就重置为0.
透明度设置: 这个也很简单.只要区别IE和其他浏览器的opacity就可以了.
滤镜设置:
RevealTrans 是IE下的滤镜.很可惜在FF等不支持滤镜的浏览器会失去效果.可以考虑 flash).
RevealTrans滤镜设置步骤:
1.context.style.filter = "revelarTrans()"; // filtro de filtro interno reveladorTrans();
2.
con(O.filters.revealTrans) {
Transición = parseInt(this.transition, 10); // 设置转换参数
Duración = parseFloat(this.duration); // 设置转换时间
aplicar(); jugar(); // 设置滤镜并执行
}
其中Transición参数说明如下:
transición : 可选项。整数值(Entero)。设置或检索转换所使用的方式。 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比较特殊可以随机样式.这里我默认使用的就是随机的.大家也可以根据自己的爱好去设置.
Duración:
duración : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式
[代码使用]
nuevo RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7. jpg', '8.jpg', '9.jpg', '10.jpg']});
其中第二项{}的设置可进行自定义. 比如你不想自动切换则可以改为:
nuevo RevealTrans('nav', {
colección:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg' , '9.jpg', '10.jpg'],
automático: falso
});
源码下载
自己的能力很有限.CSS也很菜.目的就是通过实践能够积累自己的经验,慢慢进步.如果有不妥的和好的提议.希望大家指教.