JavaScriptで文字サイズを変更する「jQuery Text Resizer Plugin」

サイトでよく見かける、文字サイズ(大・中・小)。
文字サイズが変更できるとなんだかユーザビリティに配慮した気になれます。
JavaScriptライブラリの「jQuery」プラグインjQuery Text Resizer Pluginを使用して実現してみましょう。
JavaScriptで文字サイズを変更する「jQuery Text Resizer Plugin」サンプル

使用方法
jQuery Text Resizer Pluginからファイル一式をダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.textresizer.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script>
$(function(){
$(".class名 a").textresizer({
target: "id名" //フォントサイズを変更したい場所を指定
});
});
</script>

あとは上記で指定したclass名を記述すれば完成です。
<ul class="class名">
<li><a href="#">小</a></li>
<li><a href="#">中</a></li>
<li><a href="#">大</a></li>
</ul>

大きさは記述順に反映されます。
また、script内で文字サイズを指定できます。
<script>
$(function(){
$(".class名 a").textresizer({
target: "id名"
sizes: [ ".8em", "1em", "1.5em" ]
});
});
</script>

JavaScriptで文字サイズを変更する「jQuery Text Resizer Plugin」サンプル

sponsors

「JavaScriptで文字サイズを変更する「jQuery Text Resizer Plugin」」をシェアする

記事作成:
記事URL:

TOP > > > JavaScriptで文字サイズを変更する「jQuery Text Resizer Plugin」