基于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;

  }

  代码奉上,具体如何使用,使用在何处,我就不多说了,小伙伴们自由发挥吧。