javascript调整文章字体大小方法

今天博客上添加了一个小功能,在文章页面添加了调整字体大小的功能,你可以在学建站网博客里面打开文章,在文章右上角有一个 [加大字体+] / [减小字体-] 的按钮,通过点击按钮可以逐渐加大或减小文章里面的文字大小。此功能是使用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

评论

微信扫描,手机学习

学建站网