文章のサイズを変える
6842 ワード
以前は1ページを作るときに、この機能を使うことがありましたが、今やっと共有する暇があり、その実現原理と方法を簡単に紹介します.
この機能はよく文章のページで使われていて、文章のフォントの大きさを変えるために使われているので、これは珍しいことではありません.では、この文章を書く目的は自分の理解を記録することです.
実はその動作原理は簡単で、イベントをトリガーする時に文章の字号を変えて、もっとはっきりしているのはfont-sizeという属性の値を変えることです(jQueryバージョン1.7.2)
HTML
CSS
JS
回転:http://gongxinjun.com/blog/1788.html
この機能はよく文章のページで使われていて、文章のフォントの大きさを変えるために使われているので、これは珍しいことではありません.では、この文章を書く目的は自分の理解を記録することです.
実はその動作原理は簡単で、イベントをトリガーする時に文章の字号を変えて、もっとはっきりしているのはfont-sizeという属性の値を変えることです(jQueryバージョン1.7.2)
HTML
<div class="box">
<div class="ctrl">
<a href="javascript:;"> </a>
<a href="javascript:;"> </a>
<a href="javascript:;"> </a>
</div>
<div class="cont"> </div>
</div>
CSS
.box{text-align:center;} .ctrl{padding:50px 0px 0px 0px;background:#f4f4f4;font-size:0px;border-bottom:3px solid #333;} .ctrl a{display:inline-block;width:50px;height:30px;line-height:30px;background:#333;color:#fff;font-size:14px;} .ctrl a:hover{background:#444;color:#fff;font-weight:700;text-decoration:none;} .cont{padding-top:50px;font-size:14px;}
JS
$(function(){ function sizeIn(){ var sizeCont = parseInt($(".cont").css("fontSize")); // font-size
if(sizeCont == 30){ // font-size 30
$(".cont").css({fontSize:sizeCont}); }else{ $(".cont").css({fontSize:sizeCont + 1}); } } function sizeOut(){ var sizeCont = parseInt($(".cont").css("fontSize")); if(sizeCont == 10){ // font-size 10
$(".cont").css({fontSize:sizeCont}); }else{ $(".cont").css({fontSize:sizeCont - 1}); } } function sizeDefault(){ $(".cont").css({fontSize:""}) } $(".ctrl a").click(function(){ if($(this).index() == 0){ sizeIn(); }else if($(this).index() == 1){ sizeOut(); }else{ sizeDefault(); } }) });
回転:http://gongxinjun.com/blog/1788.html