相思资源网 Design By www.200059.com

想让你的网页更加的炫酷,想让你的留言评论更加的具有互动性吗,那么请仔细研究下本代码吧。

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;

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

标签:
jQuery,文本框,缩放,上下移动

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“基于jQuery实现文本框缩放以及上下移动功能”

暂无基于jQuery实现文本框缩放以及上下移动功能的评论...