快捷導(dǎo)航

js和jQuery設(shè)置Opacity半透明兼容IE6

更新時(shí)間：2016年05月24日 10:30:01 投稿：yourber

對(duì)于每一個(gè)網(wǎng)站前端開發(fā)人員，常常都會(huì)遇到設(shè)置div透明度的需求，比如在實(shí)現(xiàn)圖片幻燈片切換效果經(jīng)常就需要使圖片淡入淡出。本文分別對(duì)原生js和jQuery在IE和其它瀏覽器中設(shè)置透明度的方法和相關(guān)注意事項(xiàng)進(jìn)行總結(jié)。

1.css設(shè)置透明度

透明度在IE瀏覽器和其他相關(guān)瀏覽器中的設(shè)置方法是不一樣的，IE使用濾鏡filter的alpha屬性，firefox和其它瀏覽器不支持濾鏡，它們使用opactiy屬性設(shè)置透明度，下面示例設(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è)置透明度

});

由此可見(jiàn)，使用jQuery進(jìn)行透明度設(shè)置，大大減少了代碼編寫的難度，同時(shí)可以很好地保證不同瀏覽器的兼容性，但是使用jQuery需要導(dǎo)入jQuery的庫(kù)文件，在某些場(chǎng)合會(huì)給站點(diǎn)的訪問(wèn)速度造成影響，如果要求不是太高，我們也可以直接使用js實(shí)現(xiàn)我們需要的效果，下面給出一段使用js實(shí)現(xiàn)半透明效果的完整示例代碼。

4.應(yīng)用實(shí)例

該實(shí)例使用原生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);

}

window的onload函數(shù)指定了在頁(yè)面加載的時(shí)候需要執(zhí)行的方法，document.getElementById實(shí)現(xiàn)通過(guò)元素的id得到元素對(duì)象，然后通過(guò)得到對(duì)象的onmouseover綁定了鼠標(biāo)移到指定層上面時(shí)對(duì)應(yīng)需要執(zhí)行的函數(shù)，該實(shí)例執(zhí)行startMove(100)，鼠標(biāo)移出層通過(guò)onmouseout綁定對(duì)應(yīng)的執(zhí)行函數(shù)，該實(shí)例執(zhí)行startMove(30)。

startMove函數(shù)實(shí)現(xiàn)的功能是將指定元素的透明度設(shè)置為傳入?yún)?shù)iTarget，范圍需要在0-255之間，并使用setInterval啟動(dòng)了一個(gè)定時(shí)器實(shí)現(xiàn)動(dòng)畫效果。

總結(jié)：說(shuō)到底就兩個(gè)屬性，一個(gè)是這對(duì)火狐，谷歌這類瀏覽器的屬性opacity(0.3)直接設(shè)置一個(gè)小數(shù)即可，另一個(gè)針對(duì)IE的屬性filter: alpha(opacity:30)，都設(shè)置好即可，另外jQuery大大簡(jiǎn)化了相應(yīng)的操作，如果網(wǎng)站上用到了jQuery的庫(kù)，還是很推薦使用jQuery的方法的。

您可能感興趣的文章: