jQueryでフォントサイズを簡易的に切り替える via:jQuery Font Resize Demo
フォントサイズを切り替えるのは意外に面倒です。
そこで、jQueryを使用して簡易的に切り替える方法を紹介します。
via:jQuery Font Resize Demo
sponsors
使用方法
jQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var originalFontSize = $('html').css('font-size'); //初期のフォントサイズ
$(".resetFont").click(function(){ //.resetFontをクリックしたときに
$('html').css('font-size', originalFontSize); //フォントサイズを戻す
});
$(".increaseFont").click(function(){ //.increaseFontをクリックしたとき
var currentFontSize = $('html').css('font-size'); //現在のフォントサイズ
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2; //フォントサイズを1.2倍する
$('html').css('font-size', newFontSize); //大きくしたフォントサイズを適用
return false;
});
$(".decreaseFont").click(function(){ //.decreaseFontをクリックしたとき
var currentFontSize = $('html').css('font-size'); //現在のフォントサイズ
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8; //フォントサイズを0.8倍する
$('html').css('font-size', newFontSize); //小さくしたフォントサイズを適用
return false;
});
});
</script>
あとは上記で指定したクラスを記述すれば完成です。
<a href="#" class="increaseFont">大</a>
<a href="#" class="decreaseFont">小</a>
<a href="#" class="resetFont">リセット</a>
※簡易的なものなので、ページをまたいで維持はできません。
jQueryでフォントサイズを簡易的に切り替える via:jQuery Font Resize Demoサンプル
sponsors
記事作成:2009年10月 1日 09:50
記事URL:http://www.skuare.net/2009/10/jqueryviajquery_font_resize_de.html
TOP > javascript > UI関連 > jQueryでフォントサイズを簡易的に切り替える via:jQuery Font Resize Demo
前の記事:スライドの切り替えが印象的なjQueryの画像ギャラリー「Sliced Image Slider」
次の記事:jQueryでフォームの値がない場所を揺らす via:Animate validation feedback using jQuery
あなたにはこちもお勧め!
jQuery プラグインまとめ!