DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 一個簡單的js漸顯(fadeIn)漸隱(fadeOut)類
一個簡單的js漸顯(fadeIn)漸隱(fadeOut)類
編輯:關於JavaScript     
要兼容IE(element.style.filter = 'alpha(opacity=value)')和非IE(element.style.opacity=value)就可以了。
另,還要注意,非IEopaciy的值是0~1之間,IE是1-100。

 

下面,貼代碼:
復制代碼 代碼如下:
/**
* @projectDescription 動畫(漸顯、漸隱)類
* /**
* @projectDescription KINGKIT UI
* @date 2010-6-1
* @author Kit.Liao
* @copyright kingkit.com.cn
* @version 0.9.0
* @感謝:http://www.cnblogs.com/rubylouvre/archive/2009/09/16/1566699.html
* 使用示例:漸顯:KUI.Animation.fadeIn(el);漸隱:KUI.Animation.fadeOut(el)
*/
KUI.Animation = {
fadeIn: function(id){
this.fade(id, true);
},
fadeOut: function(id){
this.fade(id, false);
},
fade: function(id, flag){
var target = KUI.get(id);
target.alpha = flag?1:100;
target.style.opacity = (target.alpha / 100);
target.style.filter = 'alpha(opacity=' + target.alpha + ')';
var value = target.alpha;
(function(){
target.style.opacity = (value / 100);
target.style.filter = 'alpha(opacity=' + value + ')';
if (flag) {
value++;
if (value <= 100) {
setTimeout(arguments.callee, 15);//繼續調用本身
}
}
else {
value--;
if (value >= 0) {
setTimeout(arguments.callee, 15);//繼續調用本身
}
}
})();
}
}

打包下載

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved