ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.jsを使用して設定はCookieに保持され、次回訪問時にも設定が引き継がれて表示してくれます。デモ
スクリプト
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.cookie.js" type="text/javascript"></script> <script src="jquery.textresizer.js" type="text/javascript"></script>
実装
// リサイズ用リンクボタン <div id="textsizer"> <p>文字サイズ:<p> <ul class="textresizer"> <li><a href="#">S</a></li> <li><a href="#">M</a></li> <li><a href="#">L</a></li> <li><a href="#">XL</a></li> </ul> </div> // 対象要素 <div id="div815"> テキスト </div> <script type="text/javascript"> jQuery(document).ready( function() { jQuery( "#textsizer a" ).textresizer({ target: "#div815", // 対象要素 type: "fontSize", // サイズ指定方法 sizes: [ "11px", "13px", "15px", "17px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script>
リサイズ用のボタンのスタイルは本家サイトのものそのままです。
<style> ul.textresizer { list-style: none; display: inline; margin: 0px; padding: 0px; } ul.textresizer li { display: inline; margin: 0px; margin-right: 5px; padding: 0px; } ul.textresizer a { border: solid 1px #999; padding: 2px 3px; font-weight: bold; text-decoration: none; } ul.textresizer a:hover { background: #e5e5e5; border: solid 1px #cccccc; } ul.textresizer .small-text { font-size: 11px; } ul.textresizer .medium-text { font-size: 13px; } ul.textresizer .large-text { font-size: 15px; } ul.textresizer .larger-text { font-size: 17px; } /* Style of active button */ ul.textresizer a.textresizer-active { border: solid 1px #2B562B; background: #FFCA6F; color: #000000; } /* End of Text Resizer Buttons */ </style>
関連記事
-
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
-
-
[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」
「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
-
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768
-
-
わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」
サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし
-
-
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
グリッドレイアウト プラグイン
Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb
Comment
[…] jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」 […]
jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」
[…] jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」 […]
“て”
jQuery | ページ内のフォントサイズを変更してくれる... http://owl.li/2DFm9r
参考URL:http://kwski.net/jquery/815/