0
(0)

今天博客上添加了一个小功能,在文章页面添加了调整字体大小的功能,你可以在学建站网博客里面打开文章,在文章右上角有一个 [加大字体+] / [减小字体-] 的按钮,通过点击按钮可以逐渐加大或减小文章里面的文字大小。此功能是使用javascript脚本语言实现的小功能,可以称道的地方在于代码中添加cookie记忆功能,用户在没有清除cookie的情况下下次访问会保留之前的文字大小设置,下面说下具体的实现过程:

1、首先在文章底部下载fontsize.js文件并上传到主题文件夹中;
2、然后使用js调用至网站顶部或底部文件中:

  1. <script type=“text/javascript” src=“<?php bloginfo(‘template_directory’); ?>/XXX/fontsize.js”></script>  

注意:修改其中的调用路径为正确的路径。
3、然后在内容页面single.php文件的合适位置添加以下触发按钮代码:

  1. <a id=“increase-font” href=“javascript:changeTextSize(change)”>[加大字体+] </a>  
  2. <a id=“decrease-font” href=“javascript:changeTextSize(-change)”>[减小字体-] </a>  

4、修改需要放大的区域,并添加id名称为resize,如下图:

添加id名称为resize
5、另外可以根据自己的需要为按钮添加一些css样式就可以了。

fontsize.js文件附件下载:http://pan.baidu.com/share/link?shareid=2495725964&uk=403909634

声明:本站分享的WordPress主题/插件均遵循 GPLv2 许可协议(免费开源),相关介绍资料仅供学习参考,实际版本可能会因版本迭代或开发者调整而产生变化,如程序中涉及有第三方原创图像、设计模板、远程服务等内容,应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务,亦不收取相关费用。