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 为单位,比较好控制。