縮小│font12
原始│font14
放大│font16
我的Flickr
我的收音機
我的地圖

日曆

<<             >>

2007年8月7日 星期二

部落格文章字型放大縮小功能加入成功

第一次發現這個貼心的設計,是從「Ben's部落不及格」中發現的參考他的做法是引述透過
Kaie's Blog在Selectable Post Font Size for your best view!一文中,所分享的改變文章文字
大小功能!!

所以發現眼睛疲勞看不清楚時,可以直接點擊Blog左上方的加大字體"+A"即可放大成16px大的文字,如果視力建康良好可按縮小字體"-A"縮小成12px大的文字,如果覺得畫面其奇怪的話那就請您按下"oA"就會恢復回原設定字型大小。

說真的參考上面的作法,一直出現錯誤訊息,也不知道為什麼老是無法完成此功能,最後參考這編文章Abin's Tech Note 中的「動態文字調整大小」的方法結果一試就成功。

作法如下:
把下面的 Javascript 插入模版<head>標籤的前面(或,只把函示部分插入自己模版的 Javascript 區段內):

<script type='text/javascript'>

function FontZoom(size)

{

  var element = document.getElementsByTagName("div");

  var components = new Array();

  for(i = 0, j = 0; i &lt; element.length; i++) {

    attribute = element[i].getAttribute("id");

    if(attribute == "main-wrapper") {

      components[j] = element[i];

      j++;

    }

  }

  for (i = 0; i &lt; components.length; i++)

    components[i].style.fontSize = size+'px';

}

</script>

把下面的連結程式碼放入你想讓讀者使用的地方,就完成了收工。

奇怪程式碼的內容跟Kaie's Blog的內容一樣只是放的位置我是放<head>標籤的前面

0 Comments: