Jquery控制WordPress字体大小进行切换

首先你需要用到的html代码内容(放在single.php文件里面,一般是在标题的下面):

  1. <span class="changef">
  2. <ul>
  3. <li class="fsmall">小</li>
  4. <li class="fmid">中</li> 
  5. <li class="fbig">大</li> 
  6. </ul>
  7. </span>

然后是js 代码(放在header.php文件里面或者也可以放在js文件里面进行引入):

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. 	$('.changef ul li').click(function() {  //使用的是鼠标click点击事件
  4.  
  5. 	var class_name = $(this).attr('class'); 
  6.  
  7.         //得到class的名称,也就是上面的fsmall和fmid以及fbig
  8.  
  9. 	if (class_name == 'fsmall') //当class里面的名称是fsmall的时候
  10. 	{
  11. 		fsize = 12; 
  12.  
  13.                 //字体大小根据自己的情况来修改
  14.  
  15. 		$(this).addClass("current"); 
  16.  
  17.                 //在fsmall后台再添加一个class的名称
  18.  
  19. 		$('.fmid,.fbig').removeClass("current");
  20.  
  21.                 //如果fmid和fbig后面有current这个class名称,则去掉
  22. 	}
  23. 	if (class_name == 'fmid') //当class里面的名称是fmid的时候
  24. 	{
  25. 		fsize = 14;
  26. 		$(this).addClass("current");
  27. 		$('.fsmall,.fbig').removeClass("current");
  28. 	}
  29. 	if(class_name == 'fbig') //当class里面的名称是fbig的时候
  30. 	{
  31. 		fsize = 15;
  32. 		$(this).addClass("current");
  33. 		$('.fsmall,.fmid').removeClass("current");
  34. 	}
  35. 	$('.entry-content p,.entry-content a').css('font-size',fsize+'px');
  36.  
  37.         //找到文章内容所使用的标签的class属性的名称或者id属性的名称。然后添加字体大小的样式
  38.       });
  39. })
  40. </script>

接下来还需要在添加一些css样式放到主题style.css文件中。

  1. .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;}
  2.  
  3. /*将文字左浮动排成一排,然后再添加一些其他样式。*/
  4.  
  5. .changef ul li.current {font-weight:bold; color:#FE872A;}
  6.  
  7. /*当你点击小,中,大其中任意的名称的时候,字体会变粗,颜色会改变。*/

http://www.favortt.com/


发布日期:

所属分类: Wordpress 综合 标签: