首页 > 语言 > JavaScript > 正文

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

2024-05-06 16:10:57
字体:
来源:转载
供稿:网友
这里给大家分享一段个人觉着非常实用也经常用于项目中的代码,本代码基于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; 
}  

 

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选