源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-02-19 09:52 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:基于jQuery实现文本框缩放以及上下移动功能
想让你的网页更加的炫酷,想让你的留言评论更加的具有互动性吗,那么请仔细研究下本代码吧。 jQuery代码:
[u]复制代码[/u] 代码如下:
 $(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代码:
[u]复制代码[/u] 代码如下:
<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代码:
[u]复制代码[/u] 代码如下:
.bigger , .down , .up , .smaller{     background-color: #f1a55c; } 
代码奉上,具体如何使用,使用在何处,我就不多说了,小伙伴们自由发挥吧。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部