Compatible avec plusieurs navigateurs pour obtenir la translucidité (Opera ie Firefox)_Échange d'expérience

Cliquez sur un lien ci-dessus pour faire disparaître et réapparaître l'image en fondant avant/arrière progressivement. Il utilise la transparence CSS ; en CSS vous pouvez définir la transparence de différentes manières. Pour garantir que ce fonctionne sur la plupart des navigateurs , nous utilisons les trois.

opacité :  0,5 ;
Celle-ci est la méthode CSS3 officielle , pour le moment elle fonctionne dans les nouvelles versions de Mozilla. 
-moz-opacité : 0,5 ;
Celui-ci fonctionne dans les anciennes versions de Mozilla et Phoenix/FireBird/FireFox. 
-khtml-opacité : 0,5 ;
Ceci est utilisé par les navigateurs qui utilisent le moteur de rendu KHTML , à savoir Konquerer sur Linux et Safari sur MacOS. 
filtre : alpha(opacity=50);
Celui-ci fonctionne uniquement en MSIE. 
Il en y en un autre : -khtml-opacity : 0.5 ; fonctionne pour les navigateurs Konquerer sur Linux et Safari sur MacOS. Vous pouvez l'ajouter également si vous souhaitez prendre en charge ces utilisateurs. Dans un avenir proche, la plupart des navigateurs prendront en charge CSS3 et l'opacité : 0,5 ; devrait fonctionner partout.

复制代码 代码如下 :

fonction opacité(id, opacStart, opacEnd, millisec) {
    //vitesse pour chaque image
    var speed = Math.round(millisec / 100);
    var timer = 0 ; > i--) {
            setTimeout("changeOpac(" + i + ",'"+ id + "')",(timer * speed));
            minuterie++ ;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ","'" + id + "')",(minuterie * vitesse));
            minuterie++ ;
        }
    }
}

//changer l'opacité pour différents navigateurs
function changeOpac(opacity, id) {
    var object = document.getElementById(id). style; 
    object.opacity = (opacité / 100);
    object.MozOpacity = (opacité / 100);
    object.KhtmlOpacity = (opacité / 100);
    object.filter = "alpha(opacity=" + opacity + "");
}

function shiftOpacity(id, millisec) {
    //si un élément est invisible, rendez-le visible, sinon le rendez-visible
    if(document.getElementById(id).style .opacity == 0) {
        opacity(id, 0, 100, millisec);
    } else {
        opacité(id, 100, 0, millisec);
    }
}

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

    //définir l'image actuelle comme arrière-plan
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

    //rendre l'image transparente
    changeOpac(0, imageid);

    //créer une nouvelle image
    document.getElementById(imageid).src = imagefile;

    //fondu dans l'image
    for(i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "' )",(minuterie * vitesse));
        minuterie++ ;
    }
}

function currentOpac(id, opacEnd, millisec) {
    //l'opacité standard est 100
    var currentOpac = 100 ;

    //si l'élément a une opacité définie, obtenez-le 
    if(document.getElementById(id).style.opacity < 100) {
        currentOpac = document.getElementById(id). style.opacité * 100 ;
    }

    //appel à la fonction qui modifie l'opacité
    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/