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:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 快3计算公式 江苏快3和值大小是什么 5分赛车开奖官网 北原香子av女优人体qvod 体彩青海十一选五 贵州十一选五推荐号 东京热n190演员名字叫什么 浙江11选5五码分 15选5 吉林快3中奖软件 东方6+1中生肖有多少钱 快3怎么玩赚钱 辽宁35选7开奖信息 东京热片头曲当铃声 广东快乐10分开奖 贵州11选五5