<!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 ">
<kepala>
<title> Ungkapkan Trans </title>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<gaya>
badan{warna latar: #CCCCCC;}
#container {lebar: 525 piksel; perataan teks: tengah; margin: 0 otomatis;}
#context {warna latar: #777777;batas: 2px solid #555555;lebar: 500px;}
#context img {batas: tidak ada;margin: 0px;}
#nav {lebar: 510px;tinggi: 140px;overflow: tersembunyi;gaya daftar: tidak ada;margin-atas: 3px;posisi: relatif; padding-kiri: 0px; margin-kiri:3px}
#nav li {mengapung: kiri; margin: 0 7px 4px 0;batas: 2px padat #555;}
#nav div {lebar: 90 piksel; tinggi: 60 piksel; meluap: tersembunyi;}
#nav div img {lebar: 95 piksel; tinggi: 60 piksel;}
</gaya>
<skrip>
/*!
* Ungkapkan Trans
* http://www.cnblogs.com/goodness2010/
*
* Hak Cipta (c) 2009 GoodNess2010
* Tanggal: 13-1-2009 (星期三)
*/
var $ = function(id) { return document.getElementById(id) };
var isIE = navigator.userAgent.indexOf('MSIE') != -1 ? benar : salah;
var $memperpanjang = fungsi(a, b) { untuk(var c di b) { a[c] = b[c]; } kembalikan a; };
var forEach = function(array, panggilan balik, ini) {
if(array.forEach){
array.forEach(panggilan balik, inip);
}kalau tidak {
for(var i = 0, len = array.panjang; i < len; i++) {
if(i dalam array) callback.call(inip, array[i], i, array);
}
}
};
var RevealTrans = fungsi(cId, opsi) {
ini.cId = cId;
this.timer = null;
this.curImg = null;
ini.indeks = 1;
$extend(ini, ini.setOptions(pilihan));
ini.init();
};
UngkapkanTrans.prototipe = {
konstruktor: RevealTrans,
// 初始化函数
init: fungsi() {
ini.createStruct();
ini.bindEvents();
},
// 设置默认参数
setOptions: fungsi(pilihan) {
ini.pilihan = {
otomatis: benar, // 是否自动切换
transisi: 23, // 滤镜参数(详见说明)
durasi: 1,5, // 滤镜转换所用时间(单位为秒)
minOpa: 40, // 导航图片的初始透明度
maxOpa: 100, // 导航图片的最终透明度
jeda: 2000, // 自动切换间隔时间
coll: [], // 图片集合
onEnd: function(){} // 图片滤镜转换结束自定义函数
};
return $extend(ini.options, options || {});
},
// 生成HTML结构
buatStruct: fungsi() {
var _html = '', _ini = ini;
forEach(ini.coll, function(O) {
_html += '<li><div><img src = ' + O + '></div></li>';
});
$(ini.cId).innerHTML = _html;
$('context').innerHTML = '<img src=' + this.coll[0] + '>';
ini.bindEvents();
},
// 设置透明度
setOpacity: fungsi(O, opacity) {
if(!!isIE) O.style.filter = "alpha(opacity=" + opacity + ")";
lain O.style.opacity = opacity / 100;
},
// 绑定相关事件
bindEvents: fungsi() {
var imgs = $(ini.cId).getElementsByTagName('img'), _ini = ini;
forEach(imgs, function(O, indeks) {
indeks > 0 ? _ini.setOpacity(O, _ini.minOpa) : _ini.curImg = O;
O.onmouseover = function() { this.style.cursor = 'pointer'; };
O._index = indeks;
O.onclick = function() { _this.onStart(ini); _ini.index = ini._index;};
});
// 默认演示第一个图 foto
ini.onStart(imgs[0]);
},
// 开始滤镜切换
diMulai: fungsi(O) {
var _ini = ini, konteks = $('konteks').getElementsByTagName('img')[0];
_ini.onStop();
_ini.setOpacity(_ini.curImg, _ini.minOpa);_ini.setOpacity(O, _ini.maxOpa);
_ini.curImg = O;
jika(adalahIE) {
konteks.gaya.filter = "ungkapkanTrans()";
_ini.transFx(konteks);
}
konteks.setAttribute('src', O.getAttribute('src'));
// 判断是否自动切换
if(!!this.auto) {
var len = ini.coll.length;
_this.timer = setTimeout(fungsi(){
_ini.indeks < len ? _ini.index++ : _ini.index = 1;
_this.onStart($(_this.cId).getElementsByTagName('img')[_this.index - 1]);
}, ini.jeda);
}
},
// 滤镜演示
transFx: fungsi(O) {
dengan(O.filters.revealTrans) {
Transisi = parseInt(ini.transisi, 10); Durasi = parseFloat(ini.durasi); menerapkan(); bermain();
}
},
// 清除时间戳
diBerhenti: fungsi() {
clearInterval(ini.timer);
}
};
</skrip>
</kepala>
<tubuh>
<div id="wadah">
<div id="konteks"></div>
<ul id="nav"></ul>
</div>
<skrip>
var mengungkapkanTrans = new RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg']});
</skrip>
</tubuh>
</html>
[文字说明]
foto.切换相应的图 foto. 如果设置了自动切换.就自动控制索引,如果达到最大值就重置为0.
透明度设置: 这个也很简单.只要区别IE和其他浏览器的opacity就可以了.
kata sandi:
RevealTrans是IE下的滤镜.很可惜在FF等不支持滤镜的浏览器会失去效果.(如果需要跨浏览器的这种效果可以考虑flash).
RevealTrans滤镜设置步骤:
1.context.style.filter = "ungkapkanTrans()"; // 将图片filter属性设置为revealTrans();
2.
dengan(O.filters.revealTrans) {
Transisi = parseInt(ini.transisi, 10); // 设置转换参数
Durasi = parseFloat(ini.durasi); // 设置转换时间
menerapkan(); bermain(); // 设置滤镜并执行
}
Transisi参数说明如下:
transisi : 可选项。整数值(Bilangan Bulat)。设置或检索转换所使用的方式。 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比较特殊可以随机样式.这里我默认使用的就是随机的.大家也可以根据自己的爱好去设置.
Durasi:
durasi : 可选项。浮点数(Nyata)。设置或检索转换完成所用的时间。其值为秒.毫秒(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的默认项进行自定义. 比如你不想自动切换则可以改为:
new RevealTrans('nav', {
kol:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg' , '9.jpg', '10.jpg'],
otomatis: salah
});
源码下载
自己的能力很有限.CSS也很菜.目的就是通过实践能够积累自己的经验,慢慢进步.如果有不妥的和好的提议.希望大家指教.