隨筆-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 金大為 閱讀(1309) 評(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)航:
           
          主站蜘蛛池模板: 来安县| 望城县| 平塘县| 多伦县| 辽源市| 盐津县| 高州市| 调兵山市| 东源县| 斗六市| 吴江市| 临澧县| 淳化县| 麻阳| 北川| 嘉荫县| 广宗县| 内乡县| 馆陶县| 大连市| 鹤岗市| 石林| 资溪县| 平湖市| 阜宁县| 延边| 阳西县| 休宁县| 卢龙县| 菏泽市| 饶阳县| 莱西市| 淳化县| 邢台市| 西峡县| 嘉禾县| 礼泉县| 石泉县| 栾城县| 康保县| 定陶县|