Kompatibel mit mehreren Browsern, um Transparenz zu erreichen (Opera, z. B. Firefox)_Erfahrungsaustausch

Klicken Sie oben auf einen Link, um das Bild durch allmähliches Ein-/Ausblenden verschwinden und wieder erscheinen zu lassen. Es nutzt CSS-Transparenz. In CSS können Sie die Transparenz auf verschiedene Arten festlegen. Um sicherzustellen, dass es auf den meisten Browsern funktioniert, verwenden wir alle drei.

Deckkraft: 0,5;
Dies ist die offizielle CSS3-Methode, derzeit funktioniert sie in neueren Mozilla-Versionen. 
-moz-opacity: 0,5;
Diese Funktion funktioniert in älteren Versionen von Mozilla und Phoenix/FireBird/FireFox. 
-khtml-opacity: 0,5;
Dies wird von Browsern verwendet, die die KHTML-Rendering-Engine verwenden, nämlich Konquerer unter Linux und Safari unter MacOS. 
Filter: alpha(opacity=50);
Dieser funktioniert nur in MSIE. 
Es gibt tatsächlich noch eine andere: -khtml-opacity: 0.5; funktioniert für die Browser Konquerer unter Linux und Safari unter MacOS. Sie können es auch hinzufügen, wenn Sie diese Benutzer unterstützen möchten. Irgendwann in naher Zukunft werden die meisten Browser CSS3 und Opazität: 0,5 unterstützen. sollte überall funktionieren.

复制代码 代码如下:

function opacity(id, opacStart, opacEnd, millisec) {
    //Geschwindigkeit für jeden Frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //Legen Sie die Richtung für die Mischung fest. Wenn Anfang und Ende gleich sind, passiert nichts.
    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++;
{ Stil; 
    object.opacity = (Opazität / 100);
    object.MozOpacity = (Deckkraft / 100);
    object.KhtmlOpacity = (Deckkraft / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
    //Wenn ein Element unsichtbar ist, machen es sichtbar, andernfalls sichtbar machen
    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;

    //das aktuelle Bild als Hintergrund festlegen
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ");

    //Bild transparent machen
    changeOpac(0, imageid);

    //Neues Bild erstellen
    document.getElementById(imageid).src = imagefile;

    //Bild einblenden
    for(i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "' )",(timer * speed));
        timer++;
    }
}

function currentOpac(id, opacEnd, millisec) {
    //Standard-Deckkraft ist 100
    var currentOpac = 100;

    //Wenn für das Element eine Deckkraft festgelegt ist, erhalten Sie diese.
    if(document.getElementById(id).style.opacity < 100) {
        currentOpac = document.getElementById(id). style.opacity * 100;
    }

    //Aufruf für die Funktion, die die Deckkraft ändert
    opacity(id, currentOpac, opacEnd, millisec)
}


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