主頁 > 知識庫 > 兼容多瀏覽器實現(xiàn)半透明(Opera ie firefox)

兼容多瀏覽器實現(xiàn)半透明(Opera ie firefox)

熱門標簽:中國地圖標注各省份 蘇州通信外呼系統(tǒng)多少錢 上古卷軸5地圖標注mod 荒野大鏢客2地圖標注怎么變中文 武漢人工外呼系統(tǒng) 沈陽智能外呼系統(tǒng)排名 北川縣地圖標注 山西旅游景地圖標注 移動400辦理電話
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/

標簽:喀什 濱州 陽泉 遼源 海東 南充 邯鄲 東莞

巨人網絡通訊聲明:本文標題《兼容多瀏覽器實現(xiàn)半透明(Opera ie firefox)》,本文關鍵詞  兼容,多,瀏覽器,實現(xiàn),半透明,;如發(fā)現(xiàn)本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《兼容多瀏覽器實現(xiàn)半透明(Opera ie firefox)》相關的同類信息!
  • 本頁收集關于兼容多瀏覽器實現(xiàn)半透明(Opera ie firefox)的相關信息資訊供網民參考!
  • 推薦文章