javascript代码实例教程-基于jQuery实现文本框缩放以及上下移动功能

发布时间:2018-12-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-基于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代码:

 

代码如下:


<p class="msg">
       <p class="msg_caption">
           <span class="bigger">放大</span>
           <span class="smaller">缩小</span>
           <span class="up">向上</span>
           <span class="down">向下</span>
       </p>
        <p>
            <textarea id="comment" rows="8" cols="20">
                 水电费水电费爽肤水法萨芬沙发放松放松沙发
                当爽肤水飞沙发发沙发发发发
                水电费水电费爽肤水法萨芬沙发放松放松沙发
                当爽肤水飞沙发发沙发发发发
            </textarea>
        </p>
    </p>

 

CSS代码:

代码如下:


.bigger , .down , .up , .smaller{
    background-color: #f1a55c;

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-基于jQuery实现文本框缩放以及上下移动功能全部内容,希望文章能够帮你解决javascript代码实例教程-基于jQuery实现文本框缩放以及上下移动功能所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:CSSHTML