JavaScript で制御可能な透明効果の実装 code_javascript スキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:37:16

オリジナル

1087 人が閲覧しました

スペースは 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(); >

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

< ;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 を使用してすべてのループを処理することもできますが、この場合は考え方が逆転します。加算になってしまったので、減算に変更したいと思います。