DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jQuery實現文本框縮放以及上下移動功能
基於jQuery實現文本框縮放以及上下移動功能
編輯:JQuery特效代碼     

想讓你的網頁更加的炫酷,想讓你的留言評論更加的具有互動性嗎,那麼請仔細研究下本代碼吧。

jQuery代碼:

代碼如下:
 $(function(){
          var $comment = $('#comment');
          $('.bigger').click(function(){
              if(!$comment.is(":animated")){
                  if($comment.height() < 500){
                      //$comment.height($comment.height() + 50);
                      $comment.animate({height:"+=50"},400);
                  }
              }
          });
           $('.smaller').click(function(){
               if(!$comment.is(":animated")){
                   if($comment.height() > 50){
                       //$comment.height($comment.height() - 50);
                       $comment.animate({height:"-=50"},400);
                   }
               }
           });
           $('.up').click(function(){
              if(!$comment.is(":animated")){
                  $comment.animate({scrollTop:"-=50"},400);
              }
           });
           $('.down').click(function(){
               if(!$comment.is(":animated")){
                   $comment.animate({scrollTop:"+=50"},400);
               }
           });
       }); 

HTML代碼:

代碼如下:
<div class="msg">
       <div class="msg_caption">
           <span class="bigger">放大</span>
           <span class="smaller">縮小</span>
           <span class="up">向上</span>
           <span class="down">向下</span>
       </div>
        <div>
            <textarea id="comment" rows="8" cols="20">
                 水電費水電費爽膚水法薩芬沙發放松放松沙發
                當爽膚水飛沙發發沙發發發發
                水電費水電費爽膚水法薩芬沙發放松放松沙發
                當爽膚水飛沙發發沙發發發發
            </textarea>
        </div>
    </div>

CSS代碼:

代碼如下:
.bigger , .down , .up , .smaller{
    background-color: #f1a55c;

代碼奉上,具體如何使用,使用在何處,我就不多說了,小伙伴們自由發揮吧。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved