jQuery动态改变文字大小_调整文章字体大小

jQuery调整文章字体大小、Demo代码是一款设置文本框文字大小效果的、在更换文字大小的时候具有动画效果、效果非常不错、下面是效果图、有兴趣的哥们可以下载源代码看看

HTML代码

<div id="wrapper">
  <div id="controls"> <a href="#" id="small">A</a> <a href="#" id="medium" class="selected">A</a> <a href="#" id="large">A</a> </div>
  <h1>Header</h1>
  <h2>Subheader</h2>
  <p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. </p>
</div>
<script src="js/jquery.min.js"></script> 
<script src="js/index.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px ´MicroSoft YaHei´;">
</div>

js代码

$(document).ready(function(){
  
  $("#small").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"24px"});
    $("h2").animate({"font-size":"16px"});
    $("p").animate({"font-size":"12px", "line-height":"16px"});
    
  });
  
  $("#medium").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"36px"});
    $("h2").animate({"font-size":"24px"});
    $("p").animate({"font-size":"14px", "line-height":"20px"});
    
  });
  
  $("#large").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"48px"});
    $("h2").animate({"font-size":"30px"});
    $("p").animate({"font-size":"16px", "line-height":"20px"});
    
  });
  
  $( "a" ).click(function() {
   $("a").removeClass("selected");
  $(this).addClass("selected");
  
 });

});

jquery动态改变文字大小源代码下载链接: jquery改变文字大小 密码: 47ys