摘要：
　　很多网站在文章内容页都会添加两个文本字体缩放功能的按钮，点击按钮后文本内容会有所变化......

这个网页文本字体缩放功能在destoon中是自带的，但艺灵感觉不是很好用，于是自己重新写了下并封装成jquery插件。动态效果演示图：

查看destoon的源码可以看到，他是用px来控制字体大小的。如图：虽然这段代码是实现了功能，但用id来控制内容真的很坑爹的！！！更坑爹的竟然是使用*号，也就意味着容器里面所有内容都会被执行......

字体缩放功能分析

点击“放大镜”按钮时，正文内容中的字体字号变大；点击“缩小”按钮时正文内容字体变小。

html结构

我们将字体“放大”按钮命名为：ylsj-art-add，字体“缩小”按钮命名为：ylsj-art-del，正文内容容器命名为：ylsj-art-main，正文中有很多p段落。

核心html源码

<div class="ylsj-art-main">
<span class="ylsj-art-add" title="字号放大">A+</span><span class="ylsj-art-del" title="字号缩小">A-</span>
<p>jquery制作网页文本字体缩放插件</p>
<p>很多网站中在文章内容页都会有两个<strong>文本字体缩放</strong>功能的按钮，点击按钮后文本内容会有所变化......</p>
</div>

接下来一切功能就交给jquery吧。

一、获取正文内容字体大小

jquery相关代码

/*parseFloat的第二个参数表示转化的进制，10就表示转为10进制*/
var $f_size=parseFloat($('.ylsj-art-main').css('font-size'), 10);

二、缩放功能实现

jquery代码

 <script type="text/javascript"> 
$(function(){
var $y_a_main=$('.ylsj-art-main');/*定义变量名*/
var $min_fs=10;/*最小10px*/
/*字号放大*/
y_a_main.find('.ylsj-art-add').on('click',function(){
$f_size++;
$y_a_main.css({'font-size':$f_size+'px'});
});
/*字号缩小*/
y_a_main.find('.ylsj-art-del').on('click',function(){
if($f_size>$min_fs){
$f_size--;
}else{
$f_size=$min_fs;
};
$y_a_main.css({'font-size':$f_size+'px'});
});
})
</script>

上面的代码只针对ylsj-art-main进行了处理，可能有很多看官在测试过程中发现：ylsj-art-main的字号是有变化，但里面的文本内容无变化。如果看官遇到了这种情况，不要怀疑艺灵给的代码的问题，请修改你的css代码。

再重复一遍：如果你在审查元素时看到ylsj-art-main的font-size属性有变化而文本内容无变化，请修改你的css代码。

修改css代码

.ylsj-art-main p{font-size:1em}/*不要写成px，因为写定px后，子级不能继承父级的字号大小*/

下面是分享插件的时间，需要的自行下载。还是一行代码实现整个网站的文章内容缩放功能。

源码下载

demo[源码]jquery制作网页文本字体缩放插件.zip　

调用方法

<!--jquery插件库，必须引用，如已引用可忽略，建议引用1.8.3+版本-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<!--引入文本缩放插件-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/demojs/ylsjfontsize.js"></script>
<script type="text/javascript">
$(function(){
/*调用文本缩放插件*/
 $('样式名').ylsjfontsize({
　ylsjf_add:"ylsj-art-add",   /*字号放大按钮*/
　ylsjf_del:"ylsj-art-del",   /*字号减小按钮*/
　ylsjf_min:10                /*最小字号*/
});
});
</script>

看官只需要在对应位置添加默认样式名即可实现一行代码实现想要的效果！

第8~12行精简版

$('.ylsj-art-main').ylsjfontsize();

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-10-01/324.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。