<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    隨筆-57  評(píng)論-129  文章-0  trackbacks-0
    最近在搞JSI 的重構(gòu),少來冒泡了。
    發(fā)一個(gè)中午的剛用到的小技巧:

    在關(guān)機(jī)效果實(shí)現(xiàn)上,現(xiàn)在一般根據(jù)瀏覽器特征分別使用 慮鏡/樣式/圖片 去模擬。

    其中Opera是不支持網(wǎng)頁透明的,只能用png的alpha透明模擬。
    所以,我們需要一張?zhí)貏e的小圖片。一個(gè)象素,alpha透明。

    但是這個(gè)單象素圖片的出現(xiàn),感覺有點(diǎn)怪怪的,而且當(dāng)網(wǎng)速很慢的時(shí)候,裝載這個(gè)小圖片還會(huì)延遲,效果不好。

    不過,Opera的另外一個(gè)特性,可以避免這個(gè)問題:data:協(xié)議的支持。

    對(duì)于這種小圖片,完全可以編碼到樣式里面

    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM4ffp0AwAHqALiYeNxSgAAAABJRU5ErkJggg==)


    好了,如此一來,關(guān)機(jī)效果的實(shí)現(xiàn),就沒有圖片這個(gè)累贅了。


    圖片的生成:

    圖片的生成,浪費(fèi)我一個(gè)中午的時(shí)間:(
    開始本想找個(gè)軟件做掉,最后沒發(fā)現(xiàn)一個(gè)如意的,干脆,自己看看api,自己寫了一下:
    代碼如下:
        public static void main(String[] args) throws IOException {
            BufferedImage image 
    = new BufferedImage(11,
                    BufferedImage.TYPE_INT_ARGB);
            Graphics2D g2d 
    = image.createGraphics();
            
    // RGBA #cccccc80
            g2d.setColor(new Color(0xcc0xcc0xcc0x80));
            g2d.fillRect(
    0011);
            g2d.dispose();
            IIOImage iioImage 
    = new IIOImage(image, nullnull);
            ImageTypeSpecifier type 
    = ImageTypeSpecifier
                    .createFromRenderedImage(image);
            ImageWriter writer 
    = (ImageWriter) ImageIO.getImageWriters(type, "png")
                    .next();
            ByteArrayOutputStream out 
    = new ByteArrayOutputStream();
            writer.setOutput(ImageIO.createImageOutputStream(out));
            writer.write(
    null, iioImage, null);
            BASE64Encoder encoder 
    = new BASE64Encoder();
            String result 
    = encoder.encode(out.toByteArray()).replaceAll("[\r\n]",
                    
    "");
            System.out.println(
    "data:image/png;base64," + result);
        }


    需要其他顏色,自己修改一下代碼即是。
    posted on 2007-05-18 15:30 金大為 閱讀(1300) 評(píng)論(1)  編輯  收藏

    評(píng)論:
    # re: 關(guān)于網(wǎng)頁上半透明遮罩的優(yōu)化(關(guān)機(jī)效果) 2007-06-22 14:43 | 金大為
    經(jīng)測(cè)試得:
    除ie外,瀏覽器基本都支持png Alpha透明及data協(xié)議,所以,這種遮罩代碼可以簡(jiǎn)化為:
    if(BrowserInfo.isIE()){
    masker.style.background = "#CCCCCC";
    masker.style.filter = "Alpha(opacity=50)";
    //}else if(BrowserInfo.isGecko()){
    // masker.style.background = "#CCCCCC";
    // masker.style.MozOpacity = 0.5;
    //}else if(BrowserInfo.isKhtml()){//support png alpha?? need test..yes support
    // masker.style.background = "#CCCCCC";
    // masker.style.KhtmlOpacity = 0.5;
    //}else if(BrowserInfo.isOpera(9)){
    // masker.style.opacity = 0.5;
    }else{
    //masker.style.background = "#CCCCCC";
    masker.style.backgroundImage = "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM4ffp0AwAHqALiYeNxSgAAAABJRU5ErkJggg==)";
    }  回復(fù)  更多評(píng)論
      

    只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


    網(wǎng)站導(dǎo)航:
     
    主站蜘蛛池模板: 免费看一级做a爰片久久| www.999精品视频观看免费| 又粗又黄又猛又爽大片免费| 亚洲av永久无码精品三区在线4 | 免费黄网在线观看| 性xxxx黑人与亚洲| 丁香花免费完整高清观看| 亚洲天堂2016| 成人a免费α片在线视频网站 | 久久亚洲精品成人AV| 亚洲香蕉免费有线视频| 亚洲精品**中文毛片| 一本无码人妻在中文字幕免费| 亚洲人成www在线播放| 毛片a级毛片免费播放100| 亚洲AV无码一区二区三区电影 | 噜噜噜亚洲色成人网站∨| 麻豆高清免费国产一区| 亚洲一区二区三区91| 国产大片线上免费看| 成在线人视频免费视频 | 亚洲精品无码Av人在线观看国产| a级毛片毛片免费观看久潮喷| 久热综合在线亚洲精品| av无码免费一区二区三区| 色天使色婷婷在线影院亚洲| 亚洲一本大道无码av天堂| 亚洲精品免费视频| 亚洲色成人网站WWW永久四虎| 九月婷婷亚洲综合在线| 国产午夜无码精品免费看| 亚洲福利电影在线观看| 成年女人永久免费观看片| 巨胸喷奶水www永久免费| 亚洲精品视频在线观看免费 | 国产无遮挡无码视频免费软件| 亚洲欧洲日产专区| 亚洲国产精品尤物YW在线观看| 野花香在线视频免费观看大全 | 国产亚洲一区二区精品| 成人黄18免费视频|