教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 jQuery字体大小切换的实现代码

jQuery字体大小切换的实现代码

发布时间:2015-11-17   编辑:jiaochengji.com
本文介绍下,用jquery实现字体大小切换的一例代码,学习下jquery控制页面元素的方法,有需要的朋友参考下。

jquery控制页面中字体大小切换的代码。

首页,HTML 部分:
 

复制代码 代码示例:
<ul id="resizer">
<li id="f_text">字号:</li>
<li id="f_s"><a href="javascript:void(0)">小</a></li>
<li id="f_m"><a href="javascript:void(0)">中</a></li>
<li id="f_l"><a href="javascript:void(0)">大</a></li>
</ul>

jquery代码部分:
 

复制代码 代码示例:
$(document).ready(function() {
$('#resizer li').click(function() {
var fontSize = 1.4;
var name = $(this).attr('id');
if (name == 'f_s') {
fontSize -= 0.1
} else if (name == 'f_l') {
fontSize += 0.1
} else if (name == 'f_m') {
fontSize == 1.4
}
$('.entry p').css('font-size', fontSize + 'em')    // '.entry p' 要控制的正文的选择器
});
});

说明:
这里推荐字体以 em 为单位,比较好控制。

您可能感兴趣的文章:
jQuery字体大小切换的实现代码
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
jquery更换文章内容与改变字体大小代码
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
基于jquery的图片的切换(以数字的形式)
jquery幻灯片效果的插件一例
jquery更换文章内容与改变字体大小的实现代码
jQuery下通过replace字符串替换实现大小图片切换
切片 里面包含interface_Golang数据结构详解之切片
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二

[关闭]
~ ~