jQuery点击扩展或缩小文本框效果源码实例

当前位置：首页 > 代码实例 > html5 css3代码分类 > jQuery > jQuery点击扩展或缩小文本框效果源码实例

文本框自然为填写内容而存在，如果能够人为的调整文本框的尺寸以适应内容的多少可以有效的提高网页的人性化程度，为网站增色不少，下面就简单介绍一下如何实现此效果，代码如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" />
<title>点击扩展或缩小文本框效果代码-51前端</title>
<script type="text/javascript" src="https://www51qianduan.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
   var $comment = $('#comment'); 
   $('.bigger').click(function(){ 
     if(!$comment.is(":animated")){  
       if( $comment.height() < 500 ){  
          $comment.animate({ height : "+=50" },400);   
       } 
     } 
   }) 
   $('.smaller').click(function(){
     if(!$comment.is(":animated")){
       if( $comment.height() > 50 ){ 
          $comment.animate({ height : "-=50" },400); 
       } 
     } 
   }); 
}); 
</script> 
</style>
</head>
<body>
<textarea rows="10" cols="40" id="comment">请输入内容..</textarea>
<button class="bigger">点击放大</button><button class="smaller">点击缩小</button>
</body>
</html>

代码描述：jQuery点击扩展或缩小文本框。jQuery点击扩展或缩小文本框效果源码实例

下载全部收藏

121 162

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册