[英]JavaScript: opacity works in opera but not IE
I have used the following script for images and it appears to work fine; 我对图像使用了以下脚本,它似乎可以正常工作; yet in Internet Explorer, the text is not fading out as it should. 但是在Internet Explorer中,文本并未如预期那样褪色。 Any ideas? 有任何想法吗?
<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>
Thanks! 谢谢!
Check this out: http://www.quirksmode.org/css/opacity.html 检查一下: http : //www.quirksmode.org/css/opacity.html
The important part: "IE8 uses a new notation: -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
" 重要部分:“ IE8使用新的表示法: -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
“
Also, Internet Explorer (6 and 8) seems to think that the element must have width
explicitly set, before it can be transparent. 另外,Internet Explorer(6和8)似乎认为该元素必须具有明确设置的width
,然后才能透明。 Weird. 奇怪的。 The above link does set the width with CSS, but doesn't mention this strange requirement. 上面的链接的确设置了CSS的宽度,但是没有提到这个奇怪的要求。
(although you didn't specifically ask about it, I'd recommend using jQuery for this type of tasks - it makes such effects much easier to work with, see eg here: http://api.jquery.com/fadeTo/ ) (尽管您没有特别询问,但我建议您使用jQuery来执行此类任务-使用这种效果更容易使用,请参见例如: http : //api.jquery.com/fadeTo/ )
I would recommend creating a class definition to set the opacity for elements. 我建议创建一个类定义来设置元素的不透明度。 Then, in your javascript, you would only need to write: 然后,在您的JavaScript中,您只需要编写:
document.getElementById(ba[i]).className = "opacityClassName".
In your CSS, your opacityClassName style definition can look something like this: 在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;
}
In this way, you don't have to worry about syntax like: 这样,您就不必担心语法如下:
document.getElementById(ba[i]).style.ms-filter
not working. 不工作。
Use jQuery. 使用jQuery。 I'm aware that this is the cliché answer, but in this case, it's spot on: it handles the browser quirks for you, automagically. 我知道这是老生常谈的答案,但在这种情况下,现货上:它处理浏览器的怪癖你的,自动的。
Observe example: 观察示例:
<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>
Works cross-browser (Opera, Chromium, Midori, Firefox, IE6 and IE8), with less code, gets the job done. 跨浏览器(Opera,Chromium,Midori,Firefox,IE6 和 IE8)的跨浏览器,只需较少的代码即可完成工作。 Time spent: 15 minutes. 花费时间:15分钟。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.