基於jQuery實作文字方塊縮放以及上下移動功能_jquery

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

jQuery程式碼：

複製程式碼 程式碼如下:

 $(function(){
          var $comment = $('#comment');
          $('.bigger').click(function(){
              if(!$comment.is(":animated")){
                  if($comment.height()                       //$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程式碼：

複製程式碼 程式碼如下:

      

           放大
           縮小
           上
           向下
      

       

            <br>                  水電費水電費爽膚水法薩芬沙發放鬆式放鬆沙發 <br>                 當爽膚水飛行結髮                 水電費水電費爽膚水法薩芬沙發放鬆與放鬆沙發 <br>                 當爽膚水飛行結髮            
       

   

CSS代碼：

複製程式碼 程式碼如下:

.bigger , .down , .up , .smaller{

    background-color: #f1a55c;
} 

程式碼奉上，具體如何使用，使用在何處，我就不多說了，小夥伴們自由發揮吧。