原生js和jquery中有關透明度設定的相關問題_javascript技巧

在日常開發的網站中，常常會用到設定透明度問題，最簡單的就是圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設定透明度的相關問題和注意點：

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

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

複製程式碼 程式碼如下:

var alpha = 30; //透明度值變數
var oDiv = document.getElementById('div1'); //取得DOM元素物件
oDiv.style.filter = 'alpha(opacity:' alpha ')'; //設定IE的透明度
oDiv.style.opacity = alpha / 100; //設定fierfox等透明度，注意透明度值是小數

3 jQuery設定透明度
jQuery中對透明度的設定進行了整合，相容IE和其他瀏覽器，修改opactiy屬性值即可，值為小數，因此只需要設定一次即可;

複製程式碼 程式碼如下:

$(function(){


$(function(){

$("#div1").css("opacity","0.3"); //設定透明度
});

4 一個範例範例使用原生js實作一個div的淡入淡出效果；滑鼠移入div區域，透明度為100%，滑鼠移出div區域透明度為30%，同時以時間控制透明度轉換效果； 複製程式碼

程式碼如下:


window.onload=function()
{
var oDiv = document.getElementById('div1'); div的DOM物件
oDiv.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(timer);//清空時間物件
timer = setInterval(function(set) {
var speed = 0;
if(alpha {
speed =5;
}
else
{
speed = -5; 🎜>}

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

},30); }