複数のブラウザと互換性があり、半透明性を実現 (Opera ie Firefox)_体験交流

上のリンクをクリックすると、画像が消え、徐々にフェードイン/フェードアウトして再表示されます。 CSS の透明度を使用します。CSS では、さまざまな方法で透明度を設定できます。 ほとんどのブラウザで確実に動作するように、3 つすべてを使用します。

opacity: 0.5;
これは公式の CSS3 メソッドであり、現時点では新しい Mozilla バージョンで機能します。 
-moz-opacity: 0.5;
これは、Mozilla および Phoenix/FireBird/FireFox の古いバージョンで動作します。 
-khtml-opacity: 0.5;
これは、KHTML レンダリング エンジンを使用するブラウザ、つまり Linux の Konquerer と MacOS の Safari で使用されます。 
filter: alpha(opacity=50);
これは MSIE でのみ機能します。 
実際にはもう 1 つあります: -khtml-opacity: 0.5; Linux 上のブラウザ Konquerer と MacOS 上の Safari で動作します。 これらのユーザーをサポートしたい場合は、それを追加することもできます。 近い将来、ほとんどのブラウザが CSS3 と不透明度 0.5 をサポートするようになるでしょう。 どこでも機能するはずです。

复制代码代码如下:

function opacity(id, opacStart, opacEnd, millisec) {
    //每幀的速度
   0;

    //確定混合方向，如果開始和結束相同，則不會發生
    if(opacStart > opacEnd) {
  
            setTimeout("changeOpac(" + i + ",'" + id + "')",(定時器*)) ;         }
    } else if (opacStart         for(i = opacStart; i             定時器++;
        }
 changeOpac (opacity, id) {
    var object = document.getElementById(id).風格; 
    object.opacity = (不透明度/100). 0);
    object.KhtmlOpacity = (不透明度/100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
    //如果某一元素不可見，則使其可見，否則使其不可見
    if(document.getElementById(id).style .opacity == 0) {     } else {
         不透明度(id, 100, 0, 毫秒);
  不透明度(id, 100, 0, 毫秒);
 imagefile , 毫秒) {
    var speed = Math.round(毫秒/ 100);
    vartimer = 0;

   .backgroundImage = "url(" + document.getElementById(imageid).src + ")";

    //將影像建立新映像
    document.getElementById(imageid).src = imagefile;

    //淡入映像       setTimeout(" changeOpac(" + i + ",'" + imageid + "' )",(計時器* 速度));
        (id, opacEnd, millisec) {
    //標準不透明度為100
    var currentOpac = 100;         currentOpac = document.getElementById(id).樣式.不透明度* 100;
    }

    //調用更改不透明度的函數
    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/