JavaScript で制御可能な透明効果の実装 code_javascript スキル

スペースは CSS の絶対配置によって完全に置き換えられます。始める前に、setTimeout (setInterval をシミュレートするために使用) の再帰的な使用法を練習してみましょう。

コードをコピー コードは次のとおりです。

function text(el){
var ノード = (typeof el == "文字列")? document.getElementById(el) : el;
var i = 0;
setTimeout(function(){
node .innerHTML = "

" i "

";
if(i setTimeout(arguments.callee, 100);
}
},100)
}
repeat();
}


ノードを変更するという最も単純なフェードイン効果を試してみましょう.innerHTML 行を透明度設定に追加します。

コードをコピー コードは次のとおりです。

function fadeIn(el){

var ノード = (typeof el == "文字列")? document.getElementById(el) : el;
var i = 0;
setTimeout(function(){
! "v1"? (node.style.filter="alpha(opacity=" i ")"): (node.style.opacity = i / 100); ;= 100 ){
setTimeout(arguments.callee, 100);
}
},100)
}
fade()
}


しかし、これは完璧ではありません。IE のフィルターは IE7 では機能しない可能性があり、hasLayout を有効にするには、zoom=1 を使用する必要があります。いくつかのカスタマイズ可能なパラメータを追加して拡張してみましょう。コメントはすでに非常に詳細に記載されています。理解できない場合は、メッセージで質問してください。

コードをコピー

コードは次のとおりです。 function opacity(el){ //必須のパラメータvar node = (typeof el == "string")? document.getElementById(el) : el,

//オプションのパラメータ

options = argument[1] || ,
// 変更の継続時間
duration = options.duration || 1.0,
// 開始時の透明度
from = options.from 0.0,
// 開始時の透明度end
to = options.to || 0.5,
operation = 1,
init = 0;
if(to - from operation = -1,
init = 1;
}
//内部パラメータ
//setTimeout 実行間の間隔、単位はミリ秒
varfrequency = 100,
//繰り返される呼び出しの数を仮定します
count = 継続時間 * 1000 / 周波数,
// 各透明度の増分を計算します
detal = Math.abs(to - from) /count,
// 進行中の操作の数
i = 0 ;
var main = function(){
setTimeout(function(){
if(! "v1"){
if(node.currentStyle.hasLayout) node.style.zoom = 1 ; //フィルターの失敗を防ぐ
node.style.filter="alpha(opacity=" (init * 100 Operation * detal * i * 100).toFixed(1) ")"
}else{
node.style.opacity = (初期化操作 * 詳細 * i).toFixed(3)
}
node.innerHTML = (初期化操作 * 詳細 * i).toFixed(3)
i ; >if(i setTimeout(arguments.callee,frequency)
}
},frequency)
}
main(); >

効果のデモンストレーション:

<style> .text {width:100px;height:100px;background:red;display:inline-block;} </style> <div class="text" onclick="opacity(this,{duration:4.0,from:0.0,to:1})"> </div>[Ctrl A すべて選択 注: <div class="text" onclick="opacity(this,{duration:4.0,from:1.0,to:0})">外部 Js を導入する必要がある場合は、更新して実行する必要があります </div>]
< ;div class=" text" onclick="opacity(this,{duration:4.0,from:0.0,to:1})">

しかし、上記は完璧ではなく、バグがあります。デフォルトのパラメータを使用するか、渡したパラメータを使用するかを決定するために短絡演算子を使用しますが、JavaScript では数値 0 や 0.0 も自動的に false に変換されます。したがって、最初の例では、 に 0 を渡すと、この 0 は使用されず、デフォルトの 0.5 が使用されます。解決策は、文字列「0」にすることです。さらに、パラメータ i は不要で、count を使用してすべてのループを処理することもできますが、この場合は考え方が逆転します。加算になってしまったので、減算に変更したいと思います。