點選擴充套件或縮小文字框效果程式碼

admin發表於2017-02-22
套件

文字框自然為填寫內容而存在，如果能夠人為的調整文字框的尺寸以適應內容的多少可以有效的提高網頁的人性化程度，為網站增色不少，下面就簡單介紹一下如何實現此效果，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<title>點選擴充套件或縮小文字框效果程式碼-螞蟻部落</title>
<script type="text/javascript" src="http://www.softwhy.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>

點選相應按鈕能夠實現文字框的擴充套件和縮小效果，下面簡單介紹一下實現過程:

一.實現原理:

當點選按鈕的時候通過animate()函式以動畫的形式調整調整文字框的尺寸。尺寸不是隨意調整的，而是設定了一個上線和下線，當超過上限，尺寸就不會再增加，當小於下限，尺寸也不會再減少。

二.程式碼註釋:

1.$(function(){}，當文件結構載入完成之後再去執行函式中的程式碼。

2.var $comment = $('#comment'),獲取文字框物件。

3.$('.bigger').click(function(){}，為class屬性值為bigger的按鈕繫結click事件處理函式。

4.if(!$comment.is(":animated")){}判斷文字框是否處於動畫狀態。關於is()可以參閱jQuery is()方法。

5.if( $comment.height() < 500 ）{}，判斷文字框高度是否小於500px，如果小於則會擴大尺寸。

6.$comment.animate({ height : "+=50" },400)，重新設定高度，在原有的基礎上加50。animate參閱jQuery animate()方法。

相關文章