零基础建站培训介绍

当前位置:

网站添加用户切换字体大小功能(适用wordpress,dedecms)

做一些网站时,特别是门户网站制作方法中,需要在文章页面添加一个用户切换字体大小功能,可以让浏览器根据自己需要去调节文章字体的大小,符合用户体验。效果如下图:

网站添加用户切换字体大小功能(适用wordpress,dedecms)

下面讲一下网站添加用户切换字体大小功能的方法,这种方法适用于wordpress仿站dedecms仿站教程

  1. 在<head></head>标签之间添加以下js特效代码:(<head>标签一般位于头部文件head.php中)
    <SCRIPT type=text/javaScript>
    function doZoom(size){
    document.getElementById('zoom').style.fontSize=size+'px'}
    </SCRIPT>
  2. 在文章页面模板中需要显示“字体:大 中 小”的地方添加以下代码:(wordpress文章页面模板:single.php  /  dedecms文章页面模板:article.html)
    字体:<a href="javascript:doZoom(18)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
  3. 在文章内容调用标签加上一个默认的文字大小属性。改成以下代码:
    wordpess:

    <span id="zoom" style="font-size:14px;">
    <?php the_content(); ?>
    </span>

    dedecms:

    <span id="zoom" style="font-size:14px;">
    {dede:field.body/}
    </span>
  4. 到这里为止,你自己做的网站就已经拥有用户切换字体大小功能。
上一课: 下一课:

发表评论

*

* 绝不会泄露