基于jQuery实现文本框缩放以及上下移动功能_jquery
时间：2021-07-01 10:21:17
帮助过：4人阅读
想让你的网页更加的炫酷，想让你的留言评论更加的具有互动性吗，那么请仔细研究下本代码吧。
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代码：
代码如下:
CSS代码：
代码如下:
.bigger , .down , .up , .smaller{
background-color: #f1a55c;
}
代码奉上，具体如何使用，使用在何处，我就不多说了，小伙伴们自由发挥吧。
