PHP經典實用正則表達式小結
703
2024-01-10
1.css設置透明度
透明度在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"); //設置透明度
});
由此可見，使用jQuery進行透明度設置，大大減少了代碼編寫的難度，同時可以很好地保證不同瀏覽器的兼容性，但是使用jQuery需要導入jQuery的庫文件，在某些場合會給站點的訪問速度造成影響，如果要求不是太高，我們也可以直接使用js實現我們需要的效果，下面給出一段使用js實現半透明效果的完整示例代碼。
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);
}
window的onload函數指定了在頁面加載的時候需要執行的方法，document.getElementById實現通過元素的id得到元素對象，然后通過得到對象的onmouseover綁定了鼠標移到指定層上面時對應需要執行的函數，該實例執行startMove(100)，鼠標移出層通過onmouseout綁定對應的執行函數，該實例執行startMove(30)。
startMove函數實現的功能是將指定元素的透明度設置為傳入參數iTarget，范圍需要在0-255之間，并使用setInterval啟動了一個定時器實現動畫效果。
總結：說到底就兩個屬性，一個是這對火狐，谷歌這類瀏覽器的屬性opacity(0.3)直接設置一個小數即可，另一個針對IE的屬性filter: alpha(opacity:30)，都設置好即可，另外jQuery大大簡化了相應的操作，如果網站上用到了jQuery的庫，還是很推薦使用jQuery的方法的。
