为了加强用户的阅读体验,我们可以给文章加一个字体大小切换的功能。在做之前先去网上看了下有没有这方面的内容,一看还真不少!基本都是利用Jquery来进行调节的,方法都大同小异,看下面代码。
首先你需要用到的html代码内容(放在single.php文件里面,一般是在标题的下面):
<span class="changef">
<ul>
<li class="fsmall">小</li>
<li class="fmid">中</li>
<li class="fbig">大</li>
</ul>
</span>
然后是js 代码(放在header.php文件里面或者也可以放在js文件里面进行引入):
<script type="text/javascript">
$(document).ready(function(){
$('.changef ul li').click(function() { //使用的是鼠标click点击事件
var class_name = $(this).attr('class');
//得到class的名称,也就是上面的fsmall和fmid以及fbig
if (class_name == 'fsmall') //当class里面的名称是fsmall的时候
{
fsize = 12;
//字体大小根据自己的情况来修改
$(this).addClass("current");
//在fsmall后台再添加一个class的名称
$('.fmid,.fbig').removeClass("current");
//如果fmid和fbig后面有current这个class名称,则去掉
}
if (class_name == 'fmid') //当class里面的名称是fmid的时候
{
fsize = 14;
$(this).addClass("current");
$('.fsmall,.fbig').removeClass("current");
}
if(class_name == 'fbig') //当class里面的名称是fbig的时候
{
fsize = 15;
$(this).addClass("current");
$('.fsmall,.fmid').removeClass("current");
}
$('.entry-content p,.entry-content a').css('font-size',fsize+'px');
//找到文章内容所使用的标签的class属性的名称或者id属性的名称。然后添加字体大小的样式
});
})
</script>
接下来还需要在添加一些css样式放到主题style.css文件中。
.entry-utility .changef ul li{ float:left; margin:0 3px 0 3px; border:1px dashed #e0e0e0; border-radius:5px; padding:0px 4px 0px 4px; text-align:center; display:block; font-family:"微软雅黑"; cursor:pointer;}
/*将文字左浮动排成一排,然后再添加一些其他样式。*/
.changef ul li.current {font-weight:bold; color:#FE872A;}
/*当你点击小,中,大其中任意的名称的时候,字体会变粗,颜色会改变。*/
您可能感兴趣的文章:
▪ Jquery+Bootstrap实现Collapse菜单源码(手风琴折叠效果)
▪ Underscore.js去弥补jQuery 没有实现的功能