jquery 控制字体放大缩小


  上周结了一个学校门户网站前端页面制作的工作(改版又改版,修改又修改),有很多js效果我是利用jquery来实现的,其中有个新闻正文字体放大缩小效果,比较简单,在这里提出来做个小小demo。(写几句又多一篇贴啦,经过别笑话。)

jquery 控制字体放大缩小_第1张图片


jquery 控制字体放大缩小_第2张图片



JS如下:

$(function () {
            $(".f-add").click(function () {
                var s_size = $(".aidemo").css("font-size"),s_number = parseFloat(s_size);
                if(s_number<30)
                {
                     var newSize = s_number +2;
                    $(".aidemo").css("font-size", newSize);
                }
                else
                    return false;
            });
            $(".f-dec").click(function () {
                var s_size = $(".aidemo").css("font-size"),s_number = parseFloat(s_size);
                if(s_number>14)
                {
                    var newSize = s_number -2;
                    $(".aidemo").css("font-size", newSize);
                }
                else
                    return false;
            });
        });
CSS:

 a{ padding: 4px 15px; border: 1px solid #096563; color: #096563; font-size: 14px; margin-right: 10px; text-decoration: none; font-size: 14px; }
a:hover{ background: #096563; color: #fff;}
.aidemo{ padding: 10px; border: 1px solid #ccc; background: #fafafa; margin: 30px 0 0; width: 500px; min-height: 200px; color: #666;}

HTML:

放大缩小

放大缩小文本放大缩小文本放大缩小文本放大缩小文本放大缩小文本放大缩小文本放大缩小文本放大缩小文本








你可能感兴趣的:(web页面制作,jquery控制字体放大缩小,js控制字体放大缩小)