ホームページ > ウェブフロントエンド > jsチュートリアル > シンプルな JS のフェードインとフェードアウトの class_javascript スキル

シンプルな JS のフェードインとフェードアウトの class_javascript スキル

WBOY
リリース: 2016-05-16 18:24:52
オリジナル
1333 人が閲覧しました

IE (element.style.filter = 'alpha(opacity=value)') および非 IE (element.style.opacity=value) と互換性があることだけを考慮してください。
また、non-IEopaciyの値は0から1の間、IEの値は1から100であることに注意してください。

シンプルな JS のフェードインとフェードアウトの class_javascript スキル

シンプルな JS のフェードインとフェードアウトの class_javascript スキル

以下にコードを貼り付けます:

コードをコピーします コードは次のとおりです:

/**
* @projectDescription アニメーション (フェードイン、フェードアウト) クラス
* /**
* @projectDescription KINGKIT UI
* @date 2010-6-1
* @author Kit.Liao
* @copyright kingkit.com.cn
* @version 0.9.0
* @Thanks: 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); .alpha = フラグ 1:100;
target.style.opacity = (target.alpha / 100); >var 値 = ターゲット .alpha;
(function(){
target.style.opacity = (値 / 100);
target.style.filter = 'alpha(opacity=' 値 ')' ;
if (flag) {
value ;
if (value setTimeout(arguments.callee, 15);// 自身の呼び出しを継続します
}
}
else {
value--;
if (value >= 0) {
setTimeout(arguments.callee, 15);// 自身の呼び出しを継続します
}
}
}) ();
}
}



パッケージのダウンロード
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート