标签:style blog class code java tar
转载请标明,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
标签:style blog class code java tar
原文地址:http://www.cnblogs.com/cdgxa/p/3712187.html