ネイティブ js はフェードインとフェードアウトのエフェクトを実装します

ネイティブ js はフェードインとフェードアウトのエフェクトを実装します_javascript スキル

WBOY

リリース： 2016-05-16 16:46:06

オリジナル

1980 人が閲覧しました

js で DOM ノードの透明度を設定するための関数属性: filter= "alpha(opacity=" value ")" (IE と互換性) および opacity=value/100 (FF および GG と互換性)。

まず、透明度を設定するための互換性コードを見てみましょう:

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

 
function setOpacity(ele, opacity) { 
if (ele.style.opacity != unknown) { 
///FF、GG および新バージョン IE と互換性があります 
 ele.style.opacity = opacity / 100; 

} else { 
///古いバージョンとの互換性 ie 
ele.style.filter = "alpha(opacity=" opacity ")"; 
} 
} 

友達の中には次のように書いている人もいます:

コードをコピーしてくださいコードは次のとおりです。

 
function setOpacity(ele, opacity) { 
if (document.all) { 
///ie と互換性があります 
ele.style.filter = "alpha(opacity=" opacity " )"; 
} 
ele { 
///FF および GG と互換性があります 
ele.style.opacity = opacity / 100>} 
} 

 

IE10で実行すると問題があると言いたいのですが、クリックしても反応がありません。 IE10 は不透明度属性をサポートしていますが、フィルターはサポートしていないため、この方法はお勧めできません。

フェードイン関数コード:

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

関数フェードイン (ele, 不透明度, 速度) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || 
v  var avg = 2 ? / カウント) : (不透明度 / カウント - 1); 
var timer = null; 
timer = setInterval(function() { 
if (v < opacity) { 
v = avg; 
setOpacity (ele, v); 
} else { 
clearInterval(timer); 
} 
} 

 
fadeout 関数コード: 

コードをコピー

コードは次のとおりです: function fadeout( ele、不透明度、速度) { if (ele) {

var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") | | ele.style.opacity || 100;

v 
var count = 速度 / 1000; 
var avg = (100 - 不透明度) 
var timer = null; 
timer = setInterval(function() { 
if (v - avg > opacity) { 
v -= avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
} 以下はデモの例です。 




コードをコピーします