改变文章的字号大小

鑫发现 2013-02-19 12:00:35 累计浏览 4,323 次

标签字号

之前在做一个单页的时候，有要用到这个功能，现在终于有空把它分享出来，并简单介绍下其实现原理及方法。

这个功能经常用在文章页，用于改变文章字体的大小，所以这也不是啥新鲜事了哈，那么写这篇文章的目的就是记录下自己对其的一些理解。

其实它的工作原理很简单，就是在触发事件的时候将文章的字号改变，更直白一些就是改变font-size这个属性的值，我们可以看下这个简单的原理图：

从图中就可以看出橙色部分就是要改变的，ok，直接上代码（jQuery版本1.7.2）：

HTML

<divclass="box">
    <divclass="ctrl">
        <ahref="javascript:;">放大</a>
        <ahref="javascript:;">缩小</a>
        <ahref="javascript:;">默认</a>
    </div>
    <divclass="cont">这里是一些文字</div>
</div>

CSS

.box{text-align:center;}
.ctrl{padding:50px0px0px0px;background:#f4f4f4;font-size:0px;border-bottom:3pxsolid#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;}

$(function(){
    functionsizeIn(){
        varsizeCont = parseInt($(".cont").css("fontSize")); // 获取原设定的font-size的值
        if(sizeCont == 30){ // 判断font-size增大到30像素时停止
            $(".cont").css({fontSize:sizeCont});
        }else{
            $(".cont").css({fontSize:sizeCont + 1});
        }
    }
    functionsizeOut(){
        varsizeCont = parseInt($(".cont").css("fontSize"));
        if(sizeCont == 10){ // 判断font-size减小到10像素时停止
            $(".cont").css({fontSize:sizeCont});
        }else{
            $(".cont").css({fontSize:sizeCont - 1});
        }
    }
    functionsizeDefault(){
        $(".cont").css({fontSize:""})
    }
    $(".ctrl a").click(function(){
        if($(this).index() == 0){
            sizeIn();
        }elseif($(this).index() == 1){
            sizeOut();
        }else{
            sizeDefault();
        }
 
    })
});