寫程式就像打online game,打蟲練等級,永遠沒有全破的一天!

3月 25, 2010

css文字與圖片置中與簡易按鈕製作

有的時候只想要把文字或是圖片水平且垂直置中時,很懶得去想css怎麼達成,老是用margin + padding去做又會破壞版面,而且看起來是相當蠢的作法,今天就研究了一下到底怎麼水平與垂直置文字與圖片,不要再蠢下去了。
其中關鍵語法是用line-height與vertical-align去達成,下面舉個簡單的範例。
水平置中
.text_align {
        text-align:center;
}
垂直置中
.vertical_align {
        line-height:50px;
        font-size:1.2em;
}
水平垂直置中
.align { 
        text-align:center;
        line-height:50px;
        font-size:1.2em;
}
圖片置中
.wrap {
         /* Firefox, Chrome */
          line-height : 50px;
          white-space : nowrap;

        /*設置水平居中*/
        text-align:center;

        /* 針對IE的Hack */
        *display: block;
        *font-size: 45px;/*50 * 0.9 = 45px*/
        *font-family:Arial;
}
.wrap img{
        height:20px;
        width:20px;
        vertical-align: middle;
}

3月 24, 2010

圖片編輯器-裁切篇

圖片編輯器停頓了一陣子,因為自己不曉得在忙些什麼所以就一直放著沒寫;繼上次圖片編輯器-旋轉篇後,今天在來介紹一下裁切照片的部分,主要參考的外掛為JCrop,可以輕鬆達成以前端呈現裁切照片的效果,跨瀏覽器支援也相當完整(Firefox 2+、Safari 3+、Opera 9.5+、Google Chrome 0.2+、Internet Explorer 6+),除了一般裁切外還包括設定比例裁切裁切縮圖預設裁切區塊裁切動畫裁切背景顏色更換等功能相當齊全,並且有後端php程式教學,其完整demo展示在此
在使用上並沒有什麼太大的問題,設定等比例裁切也相當方便,基本使用如下:
  1. 載入jQuery與jCrop
  2. 
    
    <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /> 

  3. 載入所要裁切的照片ID
  4. 
    
  5. 參數設定
  6. 
    
基本上使用與設定如上述所寫的,完整的使用說明請參閱
在IE使用上有點小bug,就是當使用到等比例裁切時,會發生錯誤,於是就上網搜尋了一下解法,發現大家都有遇到此困擾,但是沒有看到相對應的解法,最後只有硬著頭皮去看source code。
結果在程式第230~240行左右有一個getFixed()的函式,裡面定義了兩個全域變數,分別為 h、w,可能是與其他區域變數有衝突而產生錯誤,於是將其定義改成區域變數就解決了!!
var aspect = options.aspectRatio,
min_x = options.minSize[0]/xscale, 
min_y = options.minSize[1]/yscale,
max_x = options.maxSize[0]/xscale, 
max_y = options.maxSize[1]/yscale,
rw = x2 - x1,
rh = y2 - y1,
rwa = Math.abs(rw),
rha = Math.abs(rh),
real_ratio = rwa / rha ? rwa / rha : 0,
xx, yy, w, h //w, h未宣告在 ie 上會發生錯誤,因此加上加上w, h宣告