• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    兼容多浏览器实现半透明(Opera ie firefox)
    Click on a link above to make the image disappear and re-appear by gradually fading in/out. It uses CSS transparency, in CSS you can set the transparency in different ways. To ensure that it works on most browsers we use all three.

    opacity: 0.5;
    This one is the official CSS3 method, at the moment it works in newer Mozilla versions. 
    -moz-opacity: 0.5;
    This one works in older versions of Mozilla and Phoenix/FireBird/FireFox. 
    -khtml-opacity: 0.5;
    This is used by browsers that use teh KHTML rendering engine, namely Konquerer on Linux and Safari on MacOS. 
    filter: alpha(opacity=50);
    This one works only in MSIE. 
    There is actually another one: -khtml-opacity: 0.5; works for the browsers Konquerer on Linux and Safari on MacOS. You could add it too if you want to support these users. Somewhere in the near future most browsers will support CSS3 and opacity: 0.5; should work everywhere.
    复制代码 代码如下:

    function opacity(id, opacStart, opacEnd, millisec) {
        //speed for each frame
        var speed = Math.round(millisec / 100);
        var timer = 0;

        //determine the direction for the blending, if start and end are the same nothing happens
        if(opacStart > opacEnd) {
            for(i = opacStart; i >= opacEnd; i--) {
                setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                timer++;
            }
        } else if(opacStart  opacEnd) {
            for(i = opacStart; i = opacEnd; i++)
                {
                setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                timer++;
            }
        }
    }

    //change the opacity for different browsers
    function changeOpac(opacity, id) {
        var object = document.getElementById(id).style; 
        object.opacity = (opacity / 100);
        object.MozOpacity = (opacity / 100);
        object.KhtmlOpacity = (opacity / 100);
        object.filter = "alpha(opacity=" + opacity + ")";
    }

    function shiftOpacity(id, millisec) {
        //if an element is invisible, make it visible, else make it ivisible
        if(document.getElementById(id).style.opacity == 0) {
            opacity(id, 0, 100, millisec);
        } else {
            opacity(id, 100, 0, millisec);
        }
    }

    function blendimage(divid, imageid, imagefile, millisec) {
        var speed = Math.round(millisec / 100);
        var timer = 0;

        //set the current image as background
        document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

        //make image transparent
        changeOpac(0, imageid);

        //make new image
        document.getElementById(imageid).src = imagefile;

        //fade in image
        for(i = 0; i = 100; i++) {
            setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
            timer++;
        }
    }

    function currentOpac(id, opacEnd, millisec) {
        //standard opacity is 100
        var currentOpac = 100;

        //if the element has an opacity set, get it
        if(document.getElementById(id).style.opacity  100) {
            currentOpac = document.getElementById(id).style.opacity * 100;
        }

        //call for the function that changes the opacity
        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/
    上一篇:分页显示之超级提速版
    下一篇:解析IE, FireFox, Opera 浏览器支持Alpha透明的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    兼容多浏览器实现半透明(Opera ie firefox) 兼容,多,浏览器,实现,半透明,