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

时间:2021-05-02

想让你的网页更加的炫酷,想让你的留言评论更加的具有互动性吗,那么请仔细研究下本代码吧。

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;
}

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章