《双陈记》情侣博客

位置:主页 > 折腾WP > jQuery字体大小切换功能

jQuery字体大小切换功能

之前在万戈童鞋那里看到过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代码:

#resizer {padding: 0;float: right;}#resizer li { display: inline; float: right; color: #fff; margin-left: 5px;}#resizer li a { border-bottom: #c8c8c8 1px solid; text-align: center; border-left: #c8c8c8 1px solid; width: 16px; display: block; height: 16px; border-top: #c8c8c8 1px solid; border-right: #c8c8c8 1px solid;}#resizer li a:hover { color:#000; text-decoration: none;}

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

万戈 原版 传送



无觅相关文章插件

已经有4位童鞋留言了,还不来盖楼!

  1. 博主,兔年快乐!

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片