設置透明度問題，比如圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設置透明度的相關問題和注意點
在日常開發的網站中，常常會用到設置透明度問題，最簡單的就是圖片的淡入淡出效果。下面我介紹一下在原生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(){ $("#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(){ 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); }