连续变化的字号

最新推荐文章于 2021-03-18 17:34:27 发布

weixin_30527551

最新推荐文章于 2021-03-18 17:34:27 发布

阅读量207

点赞数

原文链接：http://www.cnblogs.com/trance/archive/2009/10/20/1586769.html

版权

在文章页，我们经常会看到字号变化的选项，常见的是 [大] [中] [小] 这样的形式，还有一种就是可以在一定的范围内连续变化，控制按钮如下：

，当不可用状态的时候按钮需要变灰，以提示用户字体不可再放大或者缩小。根据这些功能，写了一个小程序来控制字体变化和可用状态的切换。
主要原理是用一个数组来存储所有的控制字号和可用状态的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标签的聚焦虚线框
    })

转载于:https://www.cnblogs.com/trance/archive/2009/10/20/1586769.html