<!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" />
<стиль>
body {цвет фона: #CCCCCC;}
#container {ширина: 525 пикселей; выравнивание текста: центр; поле: 0 авто;}
#context {background-color: #777777;border: 2px сплошной #555555;width: 500px;}
#context img {граница: нет; поле: 0 пикселей;}
#nav {ширина: 510 пикселей; высота: 140 пикселей; переполнение: скрыто; стиль списка: нет; поле сверху: 3 пикселя; положение: относительное; отступ слева: 0 пикселей; поле слева: 3 пикселя}
#nav li {float: left; поле: 0 7px 4px 0; граница: 2 пикселя, сплошная #555;}
#nav div {ширина: 90 пикселей; высота: 60 пикселей; переполнение: скрыто;}
#nav div img {ширина: 95 пикселей; высота: 60 пикселей;}
</стиль>
<скрипт>
/*!
* РаскрытьТранс
* http://www.cnblogs.com/goodness2010/
*
* Авторские права (c) 2009 GoodNess2010
* Дата: 13 января 2009 г. (星期三)
*/
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]; } Вернуть а; };
вар forEach = функция (массив, обратный вызов, thisp) {
если (array.forEach) {
array.forEach(обратный вызов, thisp);
}еще {
for(var i = 0, len = array.length; i <len; i++) {
if(i в массиве) callback.call(thisp, array[i], i, array);
}
}
};
вар RevealTrans = функция (cId, параметры) {
this.cId = cId;
this.timer = ноль;
this.curImg = ноль;
этот.индекс = 1;
$extend(this, this.setOptions(options));
это.инит();
};
RevealTrans.prototype = {
конструктор: RevealTrans,
// 初始化函数
инициализация: функция() {
это.createStruct();
это.bindEvents();
},
// 设置默认参数
setOptions: функция (опции) {
this.options = {
auto: true, // 是否自动切换
переход: 23, // 滤镜参数(详见说明)
длительность: 1,5, // 滤镜转换所用时间(单位为秒)
minOpa: 40, // 导航图片的初始透明度
maxOpa: 100, // 导航图片的最终透明度
пауза: 2000, // 自动切换间隔时间
кол: [], // 图片集合
onEnd: function(){} // Обработка данных в режиме реального времени
};
return $extend(this.options, options || {});
},
// Формат HTML-кода
createStruct: функция() {
вар _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] + '>';
это.bindEvents();
},
// 设置透明度
setOpacity: function(O, непрозрачность) {
if(!!isIE) O.style.filter = "alpha(opacity=" + opacity + ")";
иначе O.style.opacity = непрозрачность/100;
},
// 绑定相关事件
BindEvents: функция() {
вар imgs = $(this.cId).getElementsByTagName('img'), _this = this;
forEach(imgs, function(O, index) {
индекс > 0? _this.setOpacity(O, _this.minOpa): _this.curImg = O;
O.onmouseover = function() { this.style.cursor = 'pointer'; };
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 = О;
если (ISIE) {
context.style.filter = "revealTrans()";
_this.transFx(контекст);
}
context.setAttribute('src', O.getAttribute('src'));
// 判断是否自动切换
если(!!это.авто) {
вар лен = this.coll.length;
_this.timer = setTimeout(function(){
_this.index < длина ? _this.index++ : _this.index = 1;
_this.onStart($(_this.cId).getElementsByTagName('img')[_this.index - 1]);
}, это.пауза);
}
},
// 滤镜演示
трансFx: функция(O) {
with(O.filters.revealTrans) {
Переход = parseInt(this.transition, 10); Продолжительность = parseFloat(this.duration); применять(); играть();
}
},
// 清除时间戳
onStop: функция() {
ClearInterval(this.timer);
}
};
</скрипт>
</голова>
<тело>
<div id="контейнер">
<div id="context"></div>
<ul id="nav"></ul>
</div>
<скрипт>
var showTrans = 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.
Цвет: Непрозрачность.
滤镜设置:
RevealTrans может использоваться только в IE.可以考虑вспышка).
Приложение RevealTrans:
1.context.style.filter = "revealTrans()"; // Фильтр фильтра и фильтр revealTrans();
2.
with(O.filters.revealTrans) {
Переход = parseInt(this.transition, 10); // 设置转换参数
Продолжительность = parseFloat(this.duration); // 设置转换时间
применять(); играть(); // 设置滤镜并执行
}
其中Transition 参数说明如下:
переход: 可选项。整数值(Целое число)。设置或检索转换所使用的方式。 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-й день рождения, 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, которая позволяет использовать функцию 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-файлы.CSS-файлы.CSS-файлы.和好的提议.希望大家指教.