網頁知識：jfontsize 2.0 網頁字型大小縮放jQuery套件

作者：webmaster 於 2014年04月18日 08:03:56

11077
次閱讀

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>