Result
jQuery
$(document).ready(function () {
var min=9; //最小サイズ
var max=16; //最大サイズ
var reset = $('p').css('fontSize');//デフォルト値を取得
var elm = $('p.intro, p.ending'); //適応箇所
var size = str_replace(reset, 'px', ''); //デフォルト値を設定
//クリックでサイズを大きく
$('a.plus').click(function() {
if (size<=max) {//最大サイズになったら止める
size++;//サイズを増やす
elm.css({'fontSize' : size});//フォントサイズをセットする
}
return false;
});
//クリックでサイズを小さく
$('a.minus').click(function() {
if (size>=min) {//最小サイズになったら止める
size--;//サイズを減らす
elm.css({'fontSize' : size});//フォントサイズをセットする
}
return false;
});
//リセットさせる
$('a.reset').click(function () {
//設定したデフォルト値を取得
elm.css({'fontSize' : reset});
});
});
//文字列を置換する
function str_replace(haystack, needle, replacement) {
var temp = haystack.split(needle);
return temp.join(replacement);
}
css
body {
font-size:14px;
font-family:arial;
}
a {
color:#c00;
text-decoration:none;
}
a:hover {
color:#f00;
text-decoration:underline;
}
p{
width:500px;
margin-bottom:25px;
}
html
<a href="javascript:void(0);" class="plus">A+</a> | <a href="javascript:void(0);" class="reset">Reset</a> | <a href="javascript:void(0);" class="minus">A-</a> <p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p class="ending">Sed gravida sapien nec erat posuere bibendum a ac neque.</p>
via
Quick and Easy jQuery Font Resizer Tutorial | Queness
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.32-2/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
