部落格文章字型放大縮小功能加入成功
第一次發現這個貼心的設計,是從「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 < element.length; i++) {
attribute = element[i].getAttribute("id");
if(attribute == "main-wrapper") {
components[j] = element[i];
j++;
}
}
for (i = 0; i < components.length; i++)
components[i].style.fontSize = size+'px';
}
</script>把下面的連結程式碼放入你想讓讀者使用的地方,就完成了收工。
奇怪程式碼的內容跟Kaie's Blog的內容一樣只是放的位置我是放<head>標籤的前面
0 Comments:
張貼留言