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="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

这样就行了!祝你成功!

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

发表评论

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

*

  • 方言报站也是一种有意义的尝试 2019-05-22
  • 财经随笔:年近半百,“金融科技”仍是少年 2019-05-20
  • 山西寿阳:竹马戏演员的台前幕后 2019-05-19
  • 主城赏荷地图出炉 快带上相机出发 2019-05-19
  • 男人不安全了?日本读心美女机器人,你咋想的它全知道! 2019-05-03
  • 重庆市永川区:“1+8+X”模式探索基层人民调解新路子 2019-05-03
  • 春节我在岗:爸妈,儿子在军营给您们拜年了 2019-04-22
  • 传统文化,在中国文化里,居住是衡量一个家庭生活的基本因素。 2019-04-15
  • 俄韩就铺设途经朝鲜的天然气管道恢复磋商 2019-04-15
  • 经营者要想“我心换你心”,就要未雨绸缪,让不诚信的诱惑少一点,如此才能在市场中生存下来。反过来说,承担不起亏损就关门歇业,是否也是一种不诚信呢? 2019-04-11
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-04-11
  • 乌鲁木齐:这个端午,他们的假日叫“坚守” 2019-03-29
  • 中国电信安康分公司60家智慧家庭便民服务中心盛大开业中国电信安康-最新活动 2019-03-28
  • 中心城区核心片组完成签约清零任务 2019-03-28
  • (Dos sesiones) Legislativo nacional de China concluye sesión anual Spanish.xinhuanet.com 2019-03-28
  • 657| 772| 716| 118| 651| 158| 219| 833| 300| 594|