在日常開發(fā)的網(wǎng)站中，常常會用到設(shè)置透明度問題，最簡單的就是圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問題和注意點：

1 透明度樣式設(shè)置
透明度在IE瀏覽器和其他相關(guān)瀏覽器中的設(shè)置方法不太相同，IE使用filter：alpha屬性，firefox使用opactiy屬性，下面示例設(shè)置透明度為30%：
IE：filter: alpha(opacity:30)；
firefox：opacity(0.3)；

2 原生js設(shè)置透明度
為了兼容IE與其他瀏覽器對透明度的設(shè)置，我們需要對以上兩種樣式分別進行設(shè)置；

復(fù)制代碼 代碼如下:

var alpha = 30; //透明度值變量
var oDiv = document.getElementById('div1'); //獲取DOM元素對象
oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //設(shè)置IE的透明度
oDiv.style.opacity = alpha / 100; //設(shè)置fierfox等透明度，注意透明度值是小數(shù)

復(fù)制代碼 代碼如下:

$(function(){
$("#div1").css("opacity","0.3"); //設(shè)置透明度
});

復(fù)制代碼 代碼如下:

window.onload=function()
{
var oDiv = document.getElementById('div1');//獲取div的DOM對象
oDiv.onmouseover = function() //鼠標(biāo)移入方法
{
startMove(100);
};
oDiv.onmouseout = function() //鼠標(biāo)移出方法
{
startMove(30);
};
}

var timer = null;//時間對象
var alpha = 30;//透明度初始值
function startMove(iTarget)
{
var oDiv = document.getElementById('div1');
clearInterval(timer);//清空時間對象
timer = setInterval(function(){
var speed = 0;
if(alpha < iTarget)
{
speed =5;
}
else
{
speed = -5;
}

if(alpha == iTarget)
{
clearInterval(timer);
}
else
{
alpha +=speed; //透明度值增加效果
oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //設(shè)置IE透明度
oDiv.style.opacity = alpha / 100; //設(shè)置其他瀏覽器
}
},30);
}