jQuery动态改变文字大小_调整文章字体大小
2017-05-17 14:00:22  By: dwtedx

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

jquery改变文字大小


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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+