js和jQuery設置Opacity半透明兼容IE6

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

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

1.css設置透明度

透明度在IE瀏覽器和其他相關(guān)瀏覽器中的設置方法是不一樣的，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等透明度，注意透明度值是小數(shù)

3.jQuery設置透明度

jQuery中對透明度的設置進行了整合，兼容IE和其他瀏覽器，修改opactiy屬性值即可，值為小數(shù)，因此只需要設置一次即可。下面是一段示例代碼：

復制代碼代碼如下:

$(function(){

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

});

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

4.應用實例

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

復制代碼代碼如下:

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(){

      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+')'; //設置IE透明度

         oDiv.style.opacity = alpha / 100; //設置其他瀏覽器

      }

   },30);

}

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

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

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

您可能感興趣的文章: