ネイティブ js および jquery_javascript スキルの透明度設定に関連する問題

Web サイトの日常的な開発では、透明度の設定の問題がよく使用されます。最も単純なものは、画像のフェードインおよびフェードアウト効果です。以下に、ネイティブ js および jQuery で透明度を設定する際の関連する問題と注意点を紹介します。

1 透明度スタイルの設定
IE ブラウザーとその他の関連ブラウザーでの透明度の設定方法は同じではありません。 IE は filter: alpha 属性を使用し、Firefox は opactiy 属性を使用します。次の例では、透明度を 30% に設定します。 🎜>
2 ネイティブ js で透明度を設定します
IE や他のブラウザーの透明度設定と互換性を持たせるために、上記の 2 つのスタイルを個別に設定する必要があります。 >
コードをコピーします


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

var alpha = 30; //透明度の値変数var oDiv = document.getElementById( 'div1'); //DOM 要素オブジェクトを取得します oDiv.style.filter = 'alpha(opacity:' alpha ')' //IE の透明度を設定します oDiv.style.opacity = alpha / 100; //fierfox などの透明度を設定します。透明度の値は 10 進数であることに注意してください。

3 jQuery の透明度設定
jQuery は透明度設定を統合しており、IE や他のブラウザーと互換性があります。 opactiy 属性値は 10 進数なので、設定する必要があるのは 1 回だけです。

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


$(function(){

$("#div1").css("opacity","0.3"); //透明度を設定します } ); 4 例例では、ネイティブ js を使用して div の 1 つのフェードインおよびフェードアウト効果を実装します。マウスが div 領域に移動すると、透明度は 100% になります。マウスが div 領域の外に移動し、透明度は 30% になり、透明度変換効果を制御するために時間が使用されます。

コードをコピー

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


window.onload=function()

{ var oDiv = document.getElementById('div1');//divoDiv.onmouseover = function() //メソッド内でマウスを移動{ startMove(100) }; oDiv.onmouseout = function() //メソッド内でマウスを移動 {

startMove(30);

}

var timer = null; // 時間オブジェクト
var alpha = 30; >function startMove(iTarget)
{
var oDiv = document.getElementById('div1');
clearInterval(timer);//時間オブジェクトをクリアします
timer = setInterval(function() {
var 速度 = 0;
if(alpha < iTarget)
{
速度 =5;
}
else
{
速度 = -5; 🎜>}

if(alpha == iTarget)
{
clearInterval(timer);
}
else
{
alpha =speed;値増加効果
oDiv.style.filter = 'alpha(opacity:' alpha ')' //IE の透明度を設定
oDiv.style.opacity = alpha / 100; //他のブラウザを設定します
}
},30);
}