放大缩小字体

一、点击一下字体加大1px

$("p").click(function(){
    $(this).animate({fontSize:"+=1px"},400)
});

 

二、点击放大、缩小字体，并设定最大最小值

$("span").click(function () {  //span为放大缩小字体按钮的标签
    var thisEle = $("#para").css("font-size");   //thisEle获取到的字体的大小，例如17px
    var textFontSize = parseInt(thisEle, 10);   //去掉单位，将thisEle转换为10进制的数字
    var unit = thisEle.slice(-2);   //unit获取单位px
    var cName = $(this).attr("class");   //获取按钮的class
    if (cName == "bigger") {  //如果是放大按钮，bigger为放大按钮的class
        if (textFontSize <= 22) {
            textFontSize += 2;   //字体加2px
        }
    } else if (cName == "smaller") {
        if (textFontSize >= 12) {
            textFontSize -= 2;   //字体加2px
        }
    }
    $("#para").css("font-size", textFontSize + unit);   //设置字体大小，数字+单位
});