• 当前位置：首页 > 网页教程 >>

  • 如何实现文章中字体大中小的变化

    [阅读次数： 次]  
  •   

    平时浏览网站的时候总会发现网页右上有一个关于变换文字“大 中 小”的按钮，当我们觉得文字太小看着 不舒服的时候就可以点击“中或大”将文字字体扩大，这是一个非常人性化且实用的功能，方便一些近视的朋友更好的完成文章的阅读工作，那么这样的效果好实现吗，如何实现？长春网页设计培训将实现代码为大家整理出来供大家学习参考。

     

    实现文章中字体大中小的变化代码如下：

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>实现字体大中小的另一种方法 -网页设计教程</title>
    <style type="text/css">
    <!--
    body {font-size:14px}
    -->
    </style>
    <SCRIPT type=text/javascript>
    function $(xixi) {
    return document.getElementById(xixi);
    }
    //转换字号
    function doZoom(size){
     if(size==12){
      $("contentText").style.fontSize = size + "px";
      $("fs12").style.display = "";
      $("fs14").style.display = "none";
      $("fs16").style.display = "none";
     }
     if(size==14){
      $("contentText").style.fontSize = size + "px";
      $("fs12").style.display = "none";
      $("fs14").style.display = "";
      $("fs16").style.display = "none";
     }
     if(size==16){
      $("contentText").style.fontSize = size + "px";
      $("fs12").style.display = "none";
      $("fs14").style.display = "none";
      $("fs16").style.display = "";
     }
    }
    </SCRIPT>

    </head>

    <body>

    <DIV class=fontSize id=fs12 style="DISPLAY: none"><A
    href="javascript:doZoom(16)">大</A> <A
    href="javascript:doZoom(14)">中</A> <SPAN>小</SPAN></DIV>
    <DIV class=fontSize id=fs14><A
    href="javascript:doZoom(16)">大</A> <SPAN>中</SPAN> <A
    href="javascript:doZoom(12)">小</A></DIV>
    <DIV class=fontSize id=fs16 style="DISPLAY: none"><SPAN>大</SPAN> <A
    href="javascript:doZoom(14)">中</A> <A
    href="javascript:doZoom(12)">小</A></DIV>

    <br /><br />

    <DIV id=contentText>实现文章中字体大中小的变化，请大家试用。</DIV>

    <p>实现文章字体 大 中 小 之间的切换，是不是很有意思呢？</p>


    <p>特效：文章中字体大中小的变化，大话截图将这个应用到你网站的新闻内容页上</p>
    </body>
    </html>

     

     

     

    上述为一个简单且实用的脚本语言，在今后的学习中我们还会教大家用CSS实现页面颜色和样式的转变，已适合不同浏览者的浏览习惯。

  • 如何实现文章中字体大中小的变化


上一篇：如何使用DW快速处理网页中的图片链接

下一篇：fireworks绘制卡通海景步骤

培训内容:网页设计软件|网页前台美工培训|div css样式|网店培训班|php程序开发|网站运营维护|网络营销|电子商务专业

学校地址：长春市绿园区新竹路与青浦路交汇(北京华联,火车站) 咨询电话：0431-81661151 / 15104316336 (来校请您提前致电了解开课安排)

乘车路线：22路,322路,231路,229路,64路,364路,224路,137路,139路,145路,226路,253路,284路,289路等

吉林省优秀网页设计师培训速成/就业首选品牌学校 小班教学/精讲班