<!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>
[文字说明]
图片切换：主要通过更改图片的链接来切换相应的图片。 如果设置了自动切换。就自动控制索引，如果达到了就重置为0。
透明度设置：这个也很简单。只要区分IE和其他浏览器的不透明度就可以了。
过滤器设置：
RevealTrans是IE下的过滤器。很遗憾在FF等不支持过滤器的浏览器会失去效果。（如果需要跨浏览器的这种效果可以闪现）。
RevealTrans过滤器设置步骤：
1.context.style.filter = "revealTrans()"; // 将图片filter属性设置为revealTrans();
2.
与（O.filters.revealTrans）{
转换 = parseInt(this.transition, 10); // 设置转换参数
持续时间 = parseFloat(this.duration); // 设置转换时间
申请（）;玩（）; // 设置过滤器并执行
}
其中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种比较特殊可以随机样式。这里我默认使用的就是随机的。大家也可以根据自己的爱好去设置。
持续时间参数：
持续时间 : 可选选项。浮点(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的默认项进行自定义。 比如说你不想自动切换则可以改为:
新 RevealTrans('nav', {
coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg' , '9.jpg', '10.jpg'],
自动：假
});
源码下载
自己的能力很有限。CSS也很菜。目的就是通过实践能够积累自己的经验，进步。如果有不合适的慢慢好的建议。希望大家指教。