欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-30 10:35:47
...
想让你的网页更加的炫酷,想让你的留言评论更加的具有互动性吗,那么请仔细研究下本代码吧。

jQuery代码:

复制代码 代码如下:

$(function(){
var $comment = $('#comment');
$('.bigger').click(function(){
if(!$comment.is(":animated")){
if($comment.height() //$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;
}

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