選單 Menu
計數器 Counter
TODAY : 349349349
YESTERDAY : 448448448
TOTAL : 1338933133893313389331338933133893313389331338933
網頁知識 : jfontsize 2.0 網頁字型大小縮放jQuery套件
作者 設計師 於 2014年04月18日 16:03:56 (5695 次閱讀)

jfontsize

簡介:以按鈕點選的方式,縮小放大網頁的字型,方便各個使用者更方便清楚的瀏覽網頁內容。

特色:支援自訂義按鈕CSS、參數設定字體最多改變的次數與字體縮放大小。

載點:下載jfontsize

Step 1

載入所需的JS檔

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
/*jQuery v1.2.6以上版本*/
<script src="jstorage.js"></script>
<script src="jquery.jfontsize-2.0.js"></script>

Step 2

在網頁上加入縮放按鈕

<a id="jfontsize-minus" href="#">A-</a> /*字體縮小*/
<a id="jfontsize-default" href="#">A</a> /*預設大小*/
<a id="jfontsize-plus" href="#">A+</a> /*字體放大*/

Step 3

定義需要被縮放字體大小的內容

<p class="content">This text will be resized</p>

Step 4

加入plugin與設定相關參數

<script>
$(function(){
$('.content').jfontsize({
btnMinusMaxHits: 1, // 最多可被縮小的次數
btnPlusMaxHits: 5, // 最多可被放大的次數
sizeChange: 5 // 每次縮放字體變化像素
});
});
</script>