JavaScript:不透明度适用于歌剧但不适用于IE

时间:2010-07-01 16:05:29

标签: javascript html css

我使用了以下脚本来显示图像,它似乎工作正常;但是在Internet Explorer中,文本并没有消失。有什么想法吗?

 <td colspan="5" ID='links'>
<ul id="navlist">
    <li id="active"><a href="#" id="a" onmouseover="over(this)" onmouseout="out()">Apie įmonę</a>|</li>
    <li><a href="#" ID="b" onmouseover="over(this)" onmouseout="out()">Naujienos</a>|</li>
    <li><a href="#" ID="c" onmouseover="over(this)" onmouseout="out()">Kainynai</a>|</li>
    <li><a href="#" ID="d" onmouseover="over(this)" onmouseout="out()">Aktyvaus laisvalaikio priemonės</a>|</li>
    <li><a href="#" ID="e" onmouseover="over(this)" onmouseout="out()">Servisas</a>|</li>
    <li><a href="#" ID="f" onmouseover="over(this)" onmouseout="out()">Akcijos</a>|</li>
    <li><a href="#" ID="g" onmouseover="over(this)" onmouseout="out()">Karjera</a>|</li>
    <li><a href="#" ID="h" onmouseover="over(this)" onmouseout="out()">Galerija</a>|</li>
    <li><a href="#" ID="i" onmouseover="over(this)" onmouseout="out()">Naudota technika</a></li>
</ul>
</td>
<script>
var ba = new Array("a","b","c","d","e","f","g","h","i");


function over(from){
var value = 5; 

for(i=0;i<ba.length;i++){

    if(from.id==ba[i])
    {
        //do nothing
    }
    else{
        document.getElementById(ba[i]).style.MozOpacity = value/10;
        document.getElementById(ba[i]).style.opacity = value/10;
        document.getElementById(ba[i]).style.filter = 'alpha(opacity=' + value*10 + ')';

    }
}
}
function out(){
var value = 10;

for(i=0;i<ba.length;i++){

document.getElementById(ba[i]).style.MozOpacity = value/10;
document.getElementById(ba[i]).style.opacity = value/10;
document.getElementById(ba[i]).style.filter = 'alpha(opacity=' + value*10 + ')';
}

}
</script>

谢谢!

3 个答案:

答案 0 :(得分:3)

检查出来:http://www.quirksmode.org/css/opacity.html

重要的部分:“IE8使用新的表示法:-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

此外,Internet Explorer(6和8)似乎认为该元素必须具有width显式设置,然后才能透明。奇怪的。上面的链接 用CSS设置宽度,但没有提到这个奇怪的要求。

(虽然你没有特别询问它,但我建议你使用jQuery来完成这类任务 - 它可以让这些效果更容易使用,例如参见:http://api.jquery.com/fadeTo/

答案 1 :(得分:3)

我建议创建一个类定义来设置元素的不透明度。然后,在你的javascript中,你只需要写:

document.getElementById(ba[i]).className = "opacityClassName".

在CSS中,您的opacityClassName样式定义可能如下所示:

.opacityClassName {
    filter: alpha(opacity:0.5);
    KHTMLOpacity: 0.5;
    MozOpacity: 0.5;
    -khtml-opacity:.50;
    -ms-filter:"alpha(opacity=50)";
    -moz-opacity:.50;
    filter:alpha(opacity=50);
    opacity:.50;
}

通过这种方式,您不必担心语法如下:

document.getElementById(ba[i]).style.ms-filter

不能正常工作。

答案 2 :(得分:1)

使用jQuery。我知道这是 陈词滥调的答案,但在这种情况下,它就是现场:它会自动处理浏览器怪癖。

观察示例:

<table>
<tr>
<td colspan="5" ID='links'>
<ul id="navlist">
    <li id="active"><a href="#" id="a">Apie įmonę</a>|</li>
    <li><a href="#" ID="b">Naujienos</a>|</li>
    <li><a href="#" ID="c">Kainynai</a>|</li>
    <li><a href="#" ID="d">Aktyvaus laisvalaikio priemonės</a>|</li>
    <li><a href="#" ID="e">Servisas</a>|</li>
    <li><a href="#" ID="f">Akcijos</a>|</li>
    <li><a href="#" ID="g">Karjera</a>|</li>
    <li><a href="#" ID="h">Galerija</a>|</li>
    <li><a href="#" ID="i">Naudota technika</a></li>
</ul>
</td>
</tr>
</table>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script><!-- load jQuery -->
<script>
// run when the document is loaded
$(document).ready(function(){

    // give each link under #navlist opacity, unless cursor is over it
    $('#navlist a').mouseover(function(){
        var current = this;
            // run the following for each matching element
        $('#navlist a').each(function(index,element){
            if (element != current) {
                // handles browser quirks for us
                    $(element).css('opacity',0.5);
            }
        });
    });

    // remove the opacity
    $('#navlist a').mouseout(function(event){
        $('#navlist a').each(function(index,element){
            $(element).css('opacity',1);
        });
    });
});

</script>

使用跨浏览器(Opera,Chromium,Midori,Firefox,IE6 IE8),用更少的代码完成工作。花费的时间:15分钟。