利用Jquery将WordPress文章字体大小进行切换

十二月 21
磊子 2011年 1条评论

之前有朋友说磊子的文章内容字体有点儿小了,加上浏览器之间的不同看起来也不一样,这样对用户浏览文章不是很好!所以决定给文章加一个字体大小切换的功能。在做之前先去网上看了下有没有这方面的内容,一看还真不少!基本都是利用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;}

/*当你点击小,中,大其中任意的名称的时候,字体会变粗,颜色会改变。*/

大概的效果就是这个样子:


大家可以根据自己的情况来做相应的修改。另外就是如果对html不是很熟悉的,可以看下磊子写的html相关文章。http://www.favortt.com/css-style-attribute.html 和 http://www.favortt.com/wordpress-theme-html-attribute.html

» 版权所有©转载必须以链接形式注明作者和原始出处:磊子的博客 » 利用Jquery将WordPress文章字体大小进行切换
» 地址:( Ctrl+C 复制 )
» 如果对本站感兴趣,请到网站右下方订阅本站,将为你带来更多精彩和实用的文章
» 如果您对这篇文章感兴趣,不妨小小的 捐助(Donate)一下博主吧,不管多少都是对博主最大的支持和鼓励哟,博主-磊子感谢大家的支持!!!

1 条留言 其中:访客:1 条, 博主:0 条

  1. iMe6说:

    我也写了一篇修改文章字体大小的文章,有兴趣可以来看看
    :wink:

说点什么吧




订阅本站