兼容多浏览器实现半透明(Opera ie firefox)_经验交流

单击上面的链接即可使图像消失并通过逐渐淡入/淡出的方式重新出现。 它使用 CSS 透明度，在 CSS 中您可以通过不同的方式设置透明度。 为了确保它可以在大多数浏览器上运行，我们使用这三个浏览器。

不透明度：0.5；
这是官方 CSS3 方法，目前它适用于较新的 Mozilla 版本。 
-moz-不透明度：0.5；
这个适用于旧版本的 Mozilla 和 Phoenix/FireBird/FireFox。 
-khtml-不透明度：0.5；
它由使用 KHTML 渲染引擎的浏览器使用，即 Linux 上的 Konquerer 和 MacOS 上的 Safari。 
过滤器：alpha(opacity=50);
此滤镜仅适用于 MSIE。 
实际上还有另一个：-khtml-opacity：0.5； 适用于 Linux 上的 Konquerer 浏览器和 MacOS 上的 Safari。 如果您想支持这些用户，您也可以添加它。 在不久的将来，大多数浏览器将支持 CSS3 和不透明度：0.5； 应该在任何地方都能工作。

复制代码代码如下：

function opacity(id, opacStart, opacEnd, millisec) {
    //每帧的速度
    var speed = Math.round(millisec / 100);
    vartimer = 0;

    //确定混合方向，如果开始和结束相同，则不会发生
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(定时器*速度));
            定时器++；
        }
    } else if(opacStart         for(i = opacStart; i              {
            { setTimeout("changeOpac(" + + i + ",'" + id + "')",(计时器 * 速度));
            定时器++；
        }
    }
}

//更改不同浏览器的不透明度
function changeOpac(opacity, id) {
    var object = document.getElementById(id).风格; 
    object.opacity = (不透明度/100);
    object.MozOpacity = (不透明度/100);
    object.KhtmlOpacity = (不透明度/100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
    //如果某个元素不可见，则使其可见，否则使其不可见
    if(document.getElementById(id).style .opacity == 0) {
        opacity(id, 0, 100, 毫秒);
    } else {
        不透明度(id, 100, 0, 毫秒);
    }
}

函数blendimage(divid, imageid, imagefile, 毫秒) {
    var speed = Math.round(毫秒/ 100);
    vartimer = 0;

    //设置当前图片为背景
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

    //使图像透明
    changeOpac(0, imageid);

    //创建新图像
    document.getElementById(imageid).src = imagefile;

    //淡入图像
    for(i = 0; i         setTimeout("changeOpac(" + i + ",'" + imageid + "' )",(计时器 * 速度));
        定时器++；
    }
}

function currentOpac(id, opacEnd, millisec) {
    //标准不透明度为 100
    var currentOpac = 100;

    //如果元素设置了不透明度，则获取它
    if(document.getElementById(id).style.opacity         currentOpac = document.getElementById(id).样式.不透明度 * 100;
    }

    //调用更改不透明度的函数
    opacity(id, currentOpac, opacEnd, millisec)
}

更多参考
http://www.brainerror.net/scripts_js_blendtrans.php
http://realazy.org/blog/ 2006/03/21/ie-firefox-opera-alpha-transparency/
http://alistapart.com/stories/pngopacity/