<!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> 공개트랜스 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<스타일>
본문{배경색: #CCCCCC;}
#container {너비: 525px;text-align: 센터;여백: 0 자동;}
#context {배경색: #777777;테두리: 2px 단색 #555555;너비: 500px;}
#context img {경계: 없음; 여백: 0px;}
#nav {너비: 510px;높이: 140px;오버플로: 숨김;목록 스타일: 없음;여백 상단: 3px;위치: 상대; 왼쪽 패딩: 0px; 여백-왼쪽:3px}
#nav li {float: 왼쪽; 여백: 0 7px 4px 0;테두리: 2px 단색 #555;}
#nav div {너비: 90px;높이: 60px; 오버플로: 숨김;}
#nav div img {너비: 95px;높이: 60px;}
</style>
<스크립트>
/*!
* 공개트랜스
* 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 = function(배열, 콜백, 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 = function(cId, 옵션) {
this.cId = cId;
this.timer = null;
this.curImg = null;
this.index = 1;
$extend(this, this.setOptions(options));
this.init();
};
RevealTrans.prototype = {
생성자: RevealTrans,
//初始化函数
초기화: 함수() {
this.createStruct();
this.bindEvents();
},
// 设置默认参数
setOptions: 함수(옵션) {
this.옵션 = {
auto: true, // 是否自动切换
전환: 23, // 滤镜参数(详见说明)
지속 시간: 1.5, // 滤镜转换所用时间(单位为秒)
minOpa: 40, // 导航图 Pictures 의 初始透명도
maxOpa: 100, // 사진의 투명도
일시 정지: 2000, // 自动切换间隔时间
coll: [], // 사진 파일
onEnd: function(){} // 图文滤镜转换结束자정义函数
};
return $extend(this.options, 옵션 || {});
},
// 생성HTML结构
createStruct: 함수() {
var _html = '', _this = 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: function(O, 불투명도) {
if(!!isIE) O.style.filter = "alpha(opacity=" + opacity + ")";
else O.style.opacity = 불투명도 / 100;
},
// 확정상호사건
바인드이벤트: function() {
var 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 = '포인터'; };
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;
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(함수(){
_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) {
전환 = parsInt(this.transition, 10); 기간 = parsFloat(this.duration); 적용하다(); 놀다();
}
},
// 清除时间戳
onStop: 함수() {
ClearInterval(this.timer);
}
};
</script>
</head>
<본문>
<div id="컨테이너">
<div id="컨텍스트"></div>
<ul id="nav"></ul>
</div>
<스크립트>
var discoverTrans = 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.
밝기 조절: 불투명도가 더 높아졌습니다.
滤镜设置:
RevealTrans是IE는 FF等不支持滤镜에서 浏览器会失去效果를 다운로드합니다.
RevealTrans滤镜设置步骤:
1.context.style.filter = "revealTrans()"; // 将图文filter属性设置为revealTrans();
2.
with(O.filters.revealTrans) {
전환 = parsInt(this.transition, 10); // 设置转换参数
기간 = parsFloat(this.duration); // 设置转换时间
적용하다(); 놀다(); // 设置滤镜并执行
}
其中Transition参数说明如下:
전환 : 可选项。整数值(Integer)。
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比较特殊可以随机样式.这里我默认使用就是随机的.大家也可以根据自己的爱好去设置.
기간:
기간 : 可选项。浮点数(실제)。
[代码使용]
new RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7. jpg', '8.jpg', '9.jpg', '10.jpg']});
其中第two项{}의 设置可以对 사진을 설정한 默认项进行을 사용자 정의합니다. 比如你不想自动切换则可以改为:
새로운 RevealTrans('nav', {
coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg' , '9.jpg', '10.jpg'],
자동: 거짓
});
源码下载
자체 성능이 좋습니다.CSS也很菜.目的就是过实践能够积累自己的经验, 慢慢进步.教.