文章页面添加字体大小切换功能

在制作Z-Blog PHP制作主题的过程中,经常要用到这个功能,留下方法自己备用!

一、在single.php中添加以下代码:

<script type="text/javascript">

function doZoom(size) {

var zoom = document.all ? document.all['entry'] : document.getElementById('entry');

zoom.style.fontSize = size + 'px';

}

</script>

需要注意的是,上面的entry指的是正文内容的div id,必须根据主题的实际情况进行修改。

适当位置添加按键代码

<div id="tangchao">

<span id="font_title">字号:</span>

<span id="tc_dec"><a href="javascript:doZoom(12)" title="缩小">-</a></span>

<span id="tc_n"><a href="javascript:doZoom(14)" title="恢复">o</a></span>

<span id="tc_inc"><a href="javascript:doZoom(16)" title="增大">+</a></span>

</div>

最后,样例CSS,根据自己主题调整吧

#tangchao {float:rightright; margin:0; padding:0;}

#tangchao #font_title{margin-top:2px;}

#tangchao span {display:inline; float:left; margin-left:4px;}

#tangchao span a {border-bottom:#c8c8c8 1px solid; text-align:center; border-left:#c8c8c8 1px solid; width:16px; display:block; height:18px; border-top:#c8c8c8 2px solid; border-right:#c8c8c8 1px solid;}

#tangchao span a:hover {background:#ebebeb; text-decoration:none;}

  • 时间:2015-04-22 20:35:09
  • 分类:学习笔记
  • 浏览:1382
  • 评论:0
备案号:豫ICP备12024521号
Powered By Z-BlogPHP 技术支持:唐朝