jQuery之实现页面字体变大、变小

时间：2014-05-07 01:56:48 收藏：0 阅读：306

转载请标明，http://www.gxabase.com

jQuery之实现字体变大、变小，这在我们做网页的时候经常会使用的功能，以下为实现过程：

1.制作网页页面index.html，页面代码如下：

<!doctype html>
  <html lang="en">
  　　<head>
  　　　　<meta charset="UTF-8"/>
  　　　　<title>jQuery training</title>
  　　</head>
  　　<body>
  　　　　<p>Font Size:<a href="#" id="smaller">Smaller</a><a href="#" id="bigger">Bigger</a><br/></p>
         <p>This is a Paragraph.</p>
  　　　　<script type="text/javascript" src="js/jQuery.js"></script> <!--在http://www.jquery.org网站中下载jquery_xxx.js文件并导入此页面-->
  　　　　<script type="text/javascript" src="js/ext.js"></script><!--自定义的js文件-->
  　　</body>
  </html>

2.编写js目录下的ext.js文件内容，内容如下：

function change_size(element,size){
    var current = parseInt(element.css(‘font-size‘));
    //alert(current);
    if(size == "smaller"){
        var newSize = current - 2;
    }else if(size == "bigger"){
        var newSize = current + 2;
    }    
    element.css(‘font-size‘,newSize+‘px‘);
}

$("#smaller").click(function(){
    change_size($("p"),"smaller");    
});
$("#bigger").click(function(){
    change_size($("p"),"bigger");    
});

经过以上两步就可以实现改变段落字体大小的功能。

jQuery之实现页面字体变大、变小,布布扣,bubuko.com