Question to say "I can!"

wordpress利用jquery改变文章页面字体大小

2013-12-05

对阅读网站,字体的选择要让用户自己来挑选,这样是对他们的眼睛负责。

原来的方法都是用自创建的js来实现的,因为现在很多的wordpress主题都已经加载了jquery代码,那就可以利用jquery中提供的函数来实现这个效果,具体效果可以参考左岸读书的任何一个文章页面。

实现起来也不难,具体步骤如下:

1、给要改变字体的网页添加两个按钮,在wordpress中是singel.php,一般我们放在标题的下面一行,代码如下:

<small >放大</small> <small >缩小</small>

为什么选择small呢?因为span很可能已经被其他的内容引用了,为不引起冲突,只好退而求其次了。

给small标签加上style样式,打开style.css加入如下代码:

.entry-meta small{ display:block; float:right; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;font-size:12px;color:white; }

这里的.entry-meta是包含small的框架,修改成你的就好了。

 

2、在singel.php页面中加入下面的代码,.entry-content是我的包含文章内容的标签,也改成你的。

<script type="text/javascript">
$(function(){
$("small").click(function(){
var thisEle = $(".entry-content").css("font-size");
var textFontSize = parseFloat(thisEle , 10);
var unit = thisEle.slice(-2); //
var cName = $(this).attr("class");
if(cName == "bigger"){
if( textFontSize <= 18 ){
textFontSize += 2;
}
}else if(cName == "smaller"){
if( textFontSize >= 12 ){
textFontSize -= 2;
}
}
$(".entry-content").css("font-size", textFontSize + unit);
});
});
</script>

当然了,要运行上面的代码,一定要确定你的页面加载了jquery.js,如果没有加载,你可以加载googler的jquery,如下:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

这样就行了!祝你成功!



作者:admin | Categories:设计问题 | Tags:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

无觅相关文章插件,快速提升流量