IE 透明 无效 js

我们在做图片渐变显示的时候,给图片设置透明的在IE里边失效。

导致的原因是图片没有设置高宽,解决办法也就是给图片设置高宽即可。

下面是一个效果的JS代码,红颜色部分代码如果删掉在IE里面就不会有渐变效果。

function g(id){
if(!id)return;
if(typeof id =="string"){
return document.getElementById(id);
};
return id;
};

var banner2 = {
init:function(){
var that = this;
this.menu = g("bannerMenu");
this.img = g("bannerImgUl");
this.li = this.menu.getElementsByTagName("li");
var ulHtml = [];
for(var i = 0;i<this.li.length;i++){
var src = this.li[i].getAttribute("src");
this.li[i].num = i;
var liHTML = "<li><img src='"+src+"' />";
ulHtml.push(liHTML);

this.li[i].onmouseover = function(){
if(this.num == that.c)return;
that.c = this.num;
that.show();
}
};
this.img.innerHTML = ulHtml.join("");
this.imgLi = this.img.getElementsByTagName("li");
for(var t = 0;t<this.imgLi.length;t++){
this.imgLi[t].style.width = this.imgLi[t].offsetWidth;
this.imgLi[t].style.height = this.imgLi[t].offsetHeight;
}
this.c = 0;
this.old = 0;
//this.imgLi[this.c].style.display = "block";
this.show();
},
show:function(){
var that= this;
this.imgLi[this.old].style.display = "none";
this.imgLi[this.c].style.display = "block";

if(document.all){
that.imgLi[that.c].style.filter = "Alpha(opacity=0)";
}else{
that.imgLi[that.c].style.opacity = 0;
};
var opacity = 0;
clearInterval(that.autoId);
this.autoId = setInterval(function(){
opacity+=10;
if(opacity==100){
clearInterval(that.autoId);
};
if(document.all){
that.imgLi[that.c].style.filter = "Alpha(opacity="+opacity+")";
}else{
that.imgLi[that.c].style.opacity = opacity/100;
};
},30);
this.li[this.old].className = " ";
this.li[this.c].className = "hover";
this.old = this.c;
}
}



posted on 2012-02-27 11:37  向我开炮  阅读(263)  评论(0编辑  收藏  举报