網頁知識:jfontsize 2.0 網頁字型大小縮放jQuery套件
11052
次閱讀
特色:支援自訂義按鈕CSS、參數設定字體最多改變的次數與字體縮放大小。
載點:下載jfontsize
次閱讀
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>