今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. 水平・垂直スクロースのシングルページを実装「fullPage.js」
  3. 時間入力を補助する「timepicker」
  4. ソート・フィルター・ページャー付きのテーブル「Datatable」
  5. select要素の複数選択フォームを実装「Multiple Select」

フォントサイズを変更「Text Resizer」

スポンサーリンク

指定した要素のフォントサイズを変更するjQueryプラグイン「Text Resizer」を紹介します。

jQueryプラグイン「Modern Blink」

このプラグインを使えば!ページ遷移せずに、クリックアクションだけで簡単にフォントサイズを変更することができます。

CSSを使って、いちいち「font-size」を指定する必要もないので、簡単です。また、フォントサイズを変更する要素を特定できるのも便利ですね〜!

スポンサーリンク

デモの「フォントサイズ」欄にある小、中、大……をクリックしてみてください。

「Text Resizer」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Text Resizer - jQueryプラグインまとめのカルマ</title>
<style>
li {
  display: inline-block;
}
#content {
  width: 800px;
}
</style>
</head>
<body>
<h1>jQuery Text Resizerのデモでーす。</h1>
<p class="textresizer-label">フォントサイズ</p>
<ul id="text-resizer-controls" class="textresizer">
  <li><a href="#nogo">小</a></li>
  <li><a href="#nogo">中</a></li>
  <li><a href="#nogo">大</a></li>
  <li><a href="#nogo">特大</a></li>
  <li><a href="#nogo">特々大</a></li>
  <li><a href="#nogo">特々々大</a></li>
  <li><a href="#nogo">特々々々大</a></li>
  <li><a href="#nogo">特々々々々大</a></li>
  <li><a href="#nogo">特々々々々々大</a></li>
</ul>
<div id="content">
  <h1>タイトル</h1>
  <p>フォントサイズ(小 中 大……)のリンクをクリックすると……。</p>
  <h2>サブタイトル</h2>
  <p>フォントサイズが変化するよー。</p>
</div>

<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.textresizer.js"></script>
<script>
$(document).ready(function () {
  $("#text-resizer-controls li a").textresizer({
    target: "#content"
  });
});
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)