• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> jQuery >> Jquery实现文章字体大小切换效果代码

Jquery实现文章字体大小切换效果代码

• 作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2008-12-08
• slice() 方法可从已有的数组中返回选定的元素。
  arrayObject.slice(start,end)。
  start 
  　　必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
  end 
  　　可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
  jQuery代码如下：
   代码如下 复制代码
  <script type="text/javascript">
      $(function(){
          $("span").click(function(){
              //获取para的字体大小
              var thisEle = $("#para").css("font-size");
              //parseFloat的第二个参数表示转化的进制，10就表示转为10进制
              var textFontSize = parseFloat(thisEle , 10);
              //javascript自带方法
              var unit = thisEle.slice(-2); //获取单位
              var cName = $(this).attr("class");
              if(cName == "bigger"){
                      textFontSize += 2;
              }else if(cName == "smaller"){
                      textFontSize -= 2;
              }
              //设置para的字体大小
              $("#para").css("font-size",  textFontSize + unit );
          });
      });
    </script>
   
  下面我们来看一个应用实例，把功能增加到WordPress博客中去
  首先你需要用到的html代码内容(放在single.php文件里面，一般是在标题的下面)：
  代码如下 复制代码
  <span class="changef">
  <ul>
  <li class="fsmall">小</li>
  <li class="fmid">中</li>
  <li class="fbig">大</li>
  </ul>
  </span>
  
  然后是js 代码(放在header.php文件里面或者也可以放在js文件里面进行引入)：
   代码如下 复制代码
  <script type="text/javascript">
  $(document).ready(function(){
   $('.changef ul li').click(function() {  //使用的是鼠标click点击事件
   var class_name = $(this).attr('class');
          //得到class的名称，也就是上面的fsmall和fmid以及fbig
   if (class_name == 'fsmall') //当class里面的名称是fsmall的时候
   {
    fsize = 12;
                  //字体大小根据自己的情况来修改
    $(this).addClass("current");
                  //在fsmall后台再添加一个class的名称
    $('.fmid,.fbig').removeClass("current");
                  //如果fmid和fbig后面有current这个class名称，则去掉
   }
   if (class_name == 'fmid') //当class里面的名称是fmid的时候
   {
    fsize = 14;
    $(this).addClass("current");
    $('.fsmall,.fbig').removeClass("current");
   }
   if(class_name == 'fbig') //当class里面的名称是fbig的时候
   {
    fsize = 15;
    $(this).addClass("current");
    $('.fsmall,.fmid').removeClass("current");
   }
   $('.entry-content p,.entry-content a').css('font-size',fsize+'px');
          //找到文章内容所使用的标签的class属性的名称或者id属性的名称。然后添加字体大小的样式
        });
  })
  </script>
   
  接下来还需要在添加一些css样式放到主题style.css文件中。
   代码如下 复制代码
  .entry-utility .changef ul li{ float:left; margin:0 3px 0 3px; border:1px dashed #e0e0e0; border-radius:5px; padding:0px 4px 0px 4px; text-align:center; display:block; font-family:"微软雅黑"; cursor:pointer;}
  /*将文字左浮动排成一排，然后再添加一些其他样式。*/
  .changef ul li.current {font-weight:bold; color:#FE872A;}
   /*当你点击小,中,大其中任意的名称的时候，字体会变粗，颜色会改变。*/
• jquery 鼠标悬停特效代码 :上一篇
  jquery弹出div对话框实例代码 :下一篇