<!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" />
<สไตล์>
ร่างกาย {สีพื้นหลัง: #CCCCCC;}
#container {ความกว้าง: 525px; text-align: center;margin: 0 auto;}
#context {สีพื้นหลัง: #777777; เส้นขอบ: 2px solid #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
* วันที่: 13-1-2552 (星期三)
-
var $ = function(id) { กลับ 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) {
ถ้า (array.forEach){
array.forEach(โทรกลับ, thisp);
}อื่น {
สำหรับ (var i = 0, len = array.length; i < len; i ++) {
ถ้า (ฉันอยู่ในอาร์เรย์) callback.call (thisp, array [i], i, array);
-
-
-
var RevealTrans = ฟังก์ชั่น (cId ตัวเลือก) {
นี้.cId = cId;
this.timer = โมฆะ;
นี้.curImg = null;
นี่.ดัชนี = 1;
$extend(นี่, this.setOptions(ตัวเลือก));
นี้.init();
-
RevealTrans.ต้นแบบ = {
ตัวสร้าง: RevealTrans,
// 初始化函数
เริ่มต้น: ฟังก์ชั่น () {
นี้. createStruct();
this.bindEvents();
-
// 设置默认参数
setOptions: ฟังก์ชั่น (ตัวเลือก) {
นี้.options = {
อัตโนมัติ: จริง // 是否自动切换
การเปลี่ยนแปลง: 23, // 滤镜参数(详见说明)
ระยะเวลา: 1.5, // 滤镜转换所用时间(单位为秒)
minOpa: 40, // 导航Image的初始透明度
maxOpa: 100, // 导航上的最终透明度
หยุดชั่วคราว: 2000, // 自动切换间隔时间
coll: [], // ภาพพื้นหลัง集合
onEnd: function(){} // ภาพพื้นหลัง滤镜转换结束自定义函数
-
กลับ $ ขยาย (this.options, ตัวเลือก || {});
-
// 生成HTML结构
createStruct: ฟังก์ชั่น () {
var _html = '', _this = นี่;
forEach (this.coll, ฟังก์ชั่น (O) {
_html += '<li><div><img src = ' + O + '></div></li>';
-
$(this.cId).innerHTML = _html;
$('บริบท').innerHTML = '<img src=' + this.coll[0] + '>';
this.bindEvents();
-
// 设置透明度
setOpacity: ฟังก์ชั่น (O, ความทึบ) {
ถ้า(!!isIE) O.style.filter = "alpha(opacity=" + opacity + ")";
อย่างอื่น O.style.opacity = ความทึบ / 100;
-
// 绑定相关事件
bindEvents: ฟังก์ชั่น () {
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.index = นี้._index;};
-
// 默认演示第一个ภาพ
นี้.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;
ถ้า (isIE) {
context.style.filter = "เปิดเผยทรานส์()";
_this.transFx(บริบท);
-
context.setAttribute('src', O.getAttribute('src'));
// 判断是否自动切换
ถ้า(!!this.auto) {
var len = this.coll.length;
_this.timer = setTimeout(ฟังก์ชัน(){
_this.index < เลน ? _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: ฟังก์ชั่น () {
clearInterval(this.timer);
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div id="คอนเทนเนอร์">
<div id="บริบท"></div>
<ul id="nav"></ul>
</div>
<สคริปต์>
varเปิดเผยTrans = ใหม่ 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和其他浏览器的opacity就可以了.
滤镜设置:
RevealTrans是IE下的滤镜.很可惜在FF等不支持滤镜的浏览器会失去效果.(如果需要跨浏览器的这种效果可以考虑แฟลช)
RevealTrans滤镜设置步骤:
1.context.style.filter = "เปิดเผยทรานส์()"; // ตัวกรองตัวกรอง属性设置为revealTrans();
2.
ด้วย (O.filters.revealTrans) {
การเปลี่ยนแปลง = parseInt (this.transition, 10); // 设置转换参数
ระยะเวลา = parseFloat (this.duration); // 设置转换时间
นำมาใช้(); เล่น(); // 设置滤镜并执行
-
其中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)格式
[代码使用]
ใหม่ 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', {
คอล:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg' , '9.jpg', '10.jpg'],
อัตโนมัติ: เท็จ
-
源码下载
ข้อมูลเพิ่มเติม .希望大家指教.