<!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 {width: 525px;text-align: center;margin: 0 auto;}
#context {background-color: #777777;border: 2px Solid #555555;width: 500px;}
#context img {border: none;margin: 0px;}
#nav {العرض: 510px;الارتفاع: 140px;التجاوز: مخفي;نمط القائمة: لا شيء;الهامش العلوي: 3px;الموضع: نسبي; الحشو الأيسر: 0px؛ الهامش الأيسر:3px}
#nav لي {تعويم: يسار؛ الهامش: 0 7px 4px 0;الحدود: 2px صلب #555;}
#nav div {العرض: 90px;الارتفاع: 60px; الفائض: مخفي؛}
#nav div img {width: 95px;height: 60px;}
</نمط>
<النص البرمجي>
/*!
* كشف التحويل
* http://www.cnblogs.com/goodness2010/
*
* حقوق الطبع والنشر (ج) 2009 GoodNess2010
* التاريخ: 13-1-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]; } إرجاع أ؛ };
var forEach = function(array, callback, thisp) {
إذا (صفيف. لكل) {
array.forEach(callback, thisp);
}آخر {
for(var i = 0, len = array.length; i < len; i++) {
if(i in array) callback.call(thisp, array[i], i, array);
}
}
};
فار ريفيلترانس = وظيفة(معرف، خيارات) {
this.cId = cId;
this.timer = null;
this.curImg = null;
this.index = 1;
$extend(this, this.setOptions(options));
this.init();
};
كشف Trans.prototype = {
المنشئ: RevealTrans،
// 初始化函数
الحرف الأول: وظيفة () {
this.createStruct();
this.bindEvents();
},
// 设置默认参数
خيارات الضبط: الوظيفة (خيارات) {
خيارات هذا = {
تلقائي: صحيح، // 是否自动切换
الانتقال: 23، // 滤镜参数(详见说明)
المدة: 1.5، // 滤镜转换所用时间(单位为秒)
minOpa: 40، // 导航图片的初始透明度
maxOpa: 100، // 导航图片的最终透明度
وقفة: 2000، // 自动切换间隔时间
كول: []، // 图片集合
onEnd: function(){} // قم بإلغاء تحديد قيمة الوظيفة
};
إرجاع $extend(this.options, options || {});
},
// اختر HTML
إنشاء الهيكل: وظيفة () {
var _html = '', _this = 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] + '>';
this.bindEvents();
},
// 设置透明度
setOpacity: وظيفة (O، العتامة) {
if(!!isIE) O.style.filter = "alpha(opacity=" + opacity + ")";
else O.style.opacity = opacity / 100;
},
// 绑定相关事件
أحداث الربط: الوظيفة () {
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 = '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 = O;
إذا (إيسي) {
context.style.filter = "revealTrans()";
_this.transFx(context);
}
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]);
}, this.pause);
}
},
// 滤镜演示
ترانسفكس: وظيفة (O) {
مع (O.filters.revealTrans) {
Transition = parseInt(this.transition, 10); Duration = parseFloat(this.duration); يتقدم()؛ يلعب()؛
}
},
// 清除时间戳
onStop: وظيفة () {
ClearInterval(this.timer);
}
};
</script>
</الرأس>
<الجسم>
<div معرف = "حاوية">
<div id="context"></div>
<ul id="nav"></ul>
</div>
<النص البرمجي>
فار كشف Trans = 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>
</الجسم>
</html>
[文字说明]
图片切换:主要通过更图片的链接.切换相应的图片. يمكن أن تكون هذه هي المرة الأولى التي يتم فيها استخدام هذا المنتج.
هذا هو السبب في أن هذا هو السبب وراء تفاقم العتامة في IE والعتامة.
اسم المنتج:
RevealTrans هو الحل الأمثل. فلاش).
كشف التحويلات الجديدة:
1.context.style.filter = "revealTrans()"; // قم بتصفية مرشح الصورة revealTrans();
2.
مع (O.filters.revealTrans) {
Transition = parseInt(this.transition, 10); // 置转换参数
Duration = parseFloat(this.duration); // 置转换时间
يتقدم()؛ يلعب()؛ // 置滤镜并执行
}
مراحل الانتقال:
الانتقال: 可选项.整数值(عدد صحيح) .设置或检索转换所使用的方式. 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 ساعة.爱好去设置.
المدة:
المدة: 可选项.浮点数(حقيقي)
[المنتجات]
new RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7. jpg', '8.jpg', '9.jpg', '10.jpg']});
اختر ما يناسبك{} من خلال تحديد الخيارات المحددة. أفضل ما في الأمر هو الحصول على أفضل النتائج:
كشف جديد ("تنقل" ، {
كول: ['1.jpg'، '2.jpg'، '3.jpg'، '4.jpg'، '5.jpg'، '6.jpg'، '7.jpg'، '8.jpg' ، '9.jpg'، '10.jpg']،
تلقائي: كاذب
});
源码下载
تم إنشاء هذا الرابط بواسطة CSS. أفضل ما في الأمر.