在制作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;}