网站添加用户切换字体大小功能(适用wordpress,dedecms)
做一些网站时,特别是门户网站制作方法中,需要在文章页面添加一个用户切换字体大小功能,可以让浏览器根据自己需要去调节文章字体的大小,符合用户体验。效果如下图:
下面讲一下网站添加用户切换字体大小功能的方法,这种方法适用于wordpress仿站,dedecms仿站教程。
- 在<head></head>标签之间添加以下js特效代码:(<head>标签一般位于头部文件head.php中)
<SCRIPT type=text/javaScript>
function doZoom(size){
document.getElementById('zoom').style.fontSize=size+'px'}
</SCRIPT> - 在文章页面模板中需要显示“字体:大 中 小”的地方添加以下代码:(wordpress文章页面模板:single.php / dedecms文章页面模板:article.html)
字体:<a href="javascript:doZoom(18)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
- 在文章内容调用标签加上一个默认的文字大小属性。改成以下代码:
wordpess:<span id="zoom" style="font-size:14px;">
<?php the_content(); ?>
</span>dedecms:
<span id="zoom" style="font-size:14px;">
{dede:field.body/}
</span> - 到这里为止,你自己做的网站就已经拥有用户切换字体大小功能。