JavaScript 半透明顯示

■知識(shí)點(diǎn)

設(shè)計(jì)元素的不透明度實(shí)現(xiàn)方法：IE怪異模式支持filters濾鏡集，DOM標(biāo)準(zhǔn)瀏覽器支持style.opacity屬性。IE和DOM的取值的范圍也不同：IE的filters屬性值范圍是0?100，其中0表示完全透明，而100表示不透明；DOM標(biāo)準(zhǔn)的style.opacity屬性值范圍是0?1，其中0表示完全透明，而1表示不透明。

■實(shí)例設(shè)計(jì)

為了兼容不同瀏覽器，可以把設(shè)置元素透明度的功能進(jìn)行函數(shù)封裝。

//設(shè)置元素的透明度

//參數(shù)：e表示要預(yù)設(shè)置的元素，n表示一個(gè)數(shù)值，取值范圍為0?100,如果省略，則默認(rèn)值為100,即不透明顯示元素

function setOpacity(e, n) { 

    var n = parseFloat(n);                  //把第2個(gè)參數(shù)轉(zhuǎn)換為浮點(diǎn)數(shù)

    if (n && (n〉100) || !n) n=100;         //如果第2個(gè)參數(shù)大于100或者不存在，則設(shè)置為100

    if (n && (n<0)) n =0;                   //如果第2個(gè)參數(shù)存在且值小于0,則設(shè)置其為0

    if (e.filters){                         //兼容IE瀏覽器

        e.style.filter = "alpha(opacity=" + n + ")";

    } else{                             //兼容DOM標(biāo)準(zhǔn)

        e.style.opacity = n / 100;

    }

}