Serasi dengan berbilang pelayar untuk mencapai lut sinar (Opera iaitu firefox)_Pertukaran pengalaman

Klik pada pautan di atas untuk membuat imej hilang dan muncul semula dengan memudar masuk/keluar secara beransur-ansur. Ia menggunakan ketelusan CSS, dalam CSS anda boleh menetapkan ketelusan dalam cara yang berbeza. Untuk memastikan ia berfungsi pada kebanyakan pelayar kami menggunakan ketiga tiga.

kelegapan: 0.5;
Kaedah ini adalah kaedah CSS3 rasmi, pada  saat ia berfungsi dalam versi Mozilla yang lebih baharu. 
-moz-opacity: 0.5;
Ini berfungsi dalam versi lebih lama Mozilla dan Phoenix/FireBird/FireFox. 
-khtml-opacity: 0.5;
Ini digunakan oleh pelayar yang menggunakan enjin rendering teh KHTML, iaitu Konquerer di Linux dan Safari pada MacOS. 
penapis: alpha(opacity=50);
Yang ini berfungsi hanya dalam MSIE. 
Terdapat sebenarnya satu lagi: -khtml-opacity: 0.5; berfungsi untuk pelayar Konquerer di Linux dan Safari pada MacOS. Anda boleh menambahkannya juga jika anda ingin menyokong pengguna ini. Di suatu tempat dalam masa terdekat, kebanyakan penyemak imbas akan menyokong CSS3 dan kelegapan: 0.5; harus bekerja di mana-mana sahaja.

复制代码 代码如下:

fungsi opacity(id, opacStart, opacEnd, millisec) {
    //speed untuk setiap frame
    var speed = Math.round(millisec / 100);
    var pemasa = 0;

// Tentukan arah untuk pengadunan, jika permulaan dan akhir adalah sama ada apa -apa yang berlaku
jika (opacstart & gt; opacend) {
untuk (i = opacstart; i & gt; = opacend; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(pemasa * kelajuan));
            pemasa++;
        }
    } lain jika(opacStart < opacEnd) {
         untuk(i = opacStart; i <= opacEnd; i++)             pemasa++;
}
}
}

// Tukar kelegapan untuk penyemak imbas yang berbeza
fungsi changeOpac (opacity, id) {
var object = document.getElementById (id). gaya; 
    object.opacity = (opacity / 100);
    objek.MozOpacity = (opacity / 100);
    objek.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
    //jika sesuatu elemen tidak kelihatan, jadikan kelihatan, lain jadikan ivisible
    if(document.getElementB). .opacity == 0) {
        opacity(id, 0, 100, milisec);
    } lain {
        kelegapan(id, 100, 0, milisec);
    }
}

fungsi blendimage(divid, id imej, fail imej, milisec) {
    var speed = Math.round(millisec / 100);
    var pemasa = 0;

    //tetapkan imej semasa sebagai latar belakang
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + "";

    //jadikan imej telus
    changeOpac(0, id imej);

    //buat imej baharu
    document.getElementById(imageid).src = imagefile;

    //pudar dalam imej
    untuk(i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i +  ", "+ "'image )",(pemasa * kelajuan));
        pemasa++;
    }
}

fungsi currentOpac(id, opacEnd, millisec) {
    //kelegapan standard adalah 100
    var Opac semasa; = 100

// Jika elemen mempunyai set opacity, dapatkannya
if (document.getElementById (id) .style.opacity & lt; 100) { currentOpac = document.getElementById (id). style.opacity * 100;
    }

    //panggil untuk fungsi yang menukar  kelegapan
    kelegapan(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/