快捷導(dǎo)航

原生js和jquery中有關(guān)透明度設(shè)置的相關(guān)問(wèn)題

更新時(shí)間：2014年01月08日 16:12:16 作者：

設(shè)置透明度問(wèn)題，比如圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問(wèn)題和注意點(diǎn)

在日常開(kāi)發(fā)的網(wǎng)站中，常常會(huì)用到設(shè)置透明度問(wèn)題，最簡(jiǎn)單的就是圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問(wèn)題和注意點(diǎ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與其他瀏覽器對(duì)透明度的設(shè)置，我們需要對(duì)以上兩種樣式分別進(jìn)行設(shè)置；

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

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

3 jQuery設(shè)置透明度
jQuery中對(duì)透明度的設(shè)置進(jìn)行了整合，兼容IE和其他瀏覽器，修改opactiy屬性值即可，值為小數(shù)，因此只需要設(shè)置一次即可；

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

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

4 一個(gè)示例
示例使用原生js實(shí)現(xiàn)一個(gè)div的淡入淡出效果；鼠標(biāo)移入div區(qū)域，透明度為100%，鼠標(biāo)移出div區(qū)域透明度為30%，同時(shí)用時(shí)間控制透明度轉(zhuǎn)換效果；

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

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

var timer = null;//時(shí)間對(duì)象 
var alpha = 30;//透明度初始值 
function startMove(iTarget) 
{ 
var oDiv = document.getElementById('div1'); 
clearInterval(timer);//清空時(shí)間對(duì)象 
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); 
} 