ページ内のフォントサイズを変更してくれる「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>
関連記事
-
-
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」
「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
「jqPlot」を使って円グラフを作成
Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更
-
-
Lightboxプラグイン「Boxer」
「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
Comment
[…] jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」 […]
jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」
[…] jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」 […]
“て”
jQuery | ページ内のフォントサイズを変更してくれる... http://owl.li/2DFm9r
参考URL:http://kwski.net/jquery/815/