《双陈记》情侣博客

之前在万戈童鞋那里看到过jQuery字体大小切换的功能，就像让我们的《双陈记》也加入次小功能，但不知道怎么实现的，今天谷歌了一下，找到一篇来自IM路人的《折腾 jQuery 字体大小切换》，看了看，结果是也在万童鞋那点COPY过来的，以下代码来至IM路人和万戈。

Html代码：

<ul id=”resizer”>
<li id=”f_s”><a href=”javascript:void(0)”>-</a></li>
<li id=”f_m”><a href=”javascript:void(0)”>N</a></li>
<li id=”f_l”><a href=”javascript:void(0)”>+</a></li>
</ul>

放到需要改变字体大小的地方比如《双陈记》的这个地方：

jQurey 部分：

$(document).ready(function() {
$(‘#resizer li’).click(function() {
var fontSize = 14;
var name = $(this).attr(‘id’);
if (name == ’f_s’) {
fontSize -= 2
} else if (name == ’f_l’) {
fontSize += 2
} else if (name == ’f_m’) {
fontSize == 14
}
$(‘.post_content p’).css(‘font-size’, fontSize + ’px’)
});
});

在这里《双陈记》注释一下：’.post_content p’为需要改变字体大小的ID号，fontSize=14为初始字体大小，这里采用的字号单位为px,fontSize -= 2，减小字号2px,也就变成了12px，fontSize += 2，增大字号2px，变成16px,这几个参数可以自己调整的。

CSS代码：

到这里基本就OK了，再用css控制一下样式，就实现了jQuery字体大小切换功能。

万戈 原版 传送