jquery 控制字体放大缩小

    xiaoxiao2021-03-31  44

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

    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:

    <a href="#" class="f-add">放大</a><a href="#" class="f-dec">缩小</a> <div class="aidemo">放大缩小文本放大缩小文本放大缩小文本放大缩小文本放大缩小文本放大缩小文本放大缩小文本放大缩小文本</div>

    转载请注明原文地址: https://ju.6miu.com/read-665355.html

    最新回复(0)