兼容多浏览器实现半透明(Opera ie firefox)_经验交流-css教程-PHP中文网

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

WBOY

发布： 2016-05-16 12:09:31

原创

1634 人浏览过

单击上面的链接即可使图像消失并通过逐渐淡入/淡出的方式重新出现。它使用 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) 
}