连续变化的字号

在文章页，我们经常会看到字号变化的选项，常见的是 [大] [中] [小] 这样的形式，还有一种就是可以在一定的范围内连续变化，控制按钮如下：
  ，当不可用状态的时候 按钮需要变灰，以提示用户字体不可再放大或者缩小。根据这些功能，写了一个小程序来控制字体变化和可用状态的切换。
主要原理是 用一个数组来存储所有的控制字号和 可用状态的class，然后随着+ 或者 - 号的点击，来读取相应的数组元素，计算类名并施加到相应受控容器：

fstp:["fmin","fstp1","fstp2","fstp3","fstp4","fstp5","fstp6","fstp7","fstp8","fmax"], //字号数组

fctl:$("#artbox"), //受控容器

 其中fmin 和 fmax 除了控制字号，还控制了+ - 按钮的可用和不可用状态：

.fmax .func a.add{ background-position:0 0;} /*不可用状态的样式*/
.fmin  .text p{ font-size:1em;}
.fstp1 .text p{ font-size:1.1em;}
.fstp2 .text p{ font-size:1.2em;}
.fstp3 .text p{ font-size:1.3em;}
.fstp4 .text p{ font-size:1.4em;}
.fstp5 .text p{ font-size:1.5em;}
.fstp6 .text p{ font-size:1.6em;}
.fstp7 .text p{ font-size:1.7em;}
.fstp8 .text p{ font-size:1.8em;}
.fmax .text p{ font-size:2em;}
.fmin .func a.dec{ background-position:0 -34px;} /*不可用状态的样式*/

 完成的代码如下 也可查看DEMO：

$(function(){
    var fsize; //Steping Font Size 
    if(!fsize) fsize={};
    fsize={
        fidx:2, //起始字号序列
        fstp:["fmin","fstp1","fstp2","fstp3","fstp4","fstp5","fstp6","fstp7","fstp8","fmax"], //字号数组
        fctl:$("#artbox"), //受控容器
        fcls:"artbox ", //受控容器原有class
        fup :function(){ //字号增加
            fsize.fidx++;
            if(fsize.fidx>=fsize.fstp.length-1)  fsize.fidx=fsize.fstp.length-1;
            var cls=fsize.fcls+fsize.fstp[fsize.fidx];
            fsize.fctl.attr("class",cls);
            },
        fdown:function(){ //字号减小
            fsize.fidx--;
            if(fsize.fidx<=0)  fsize.fidx=0;
            var cls=fsize.fcls+fsize.fstp[fsize.fidx];
            fsize.fctl.attr("class",cls);
            }    
        }
    
    //fsize.fup();
    $(".add").click(function(){fsize.fup();})
    $(".dec").click(function(){fsize.fdown();})
    $(".add,.dec").focus(function(e){$(e.target).blur()}) //取消a标签的聚焦虚线框
    })