想讓你的網頁更加的炫酷,想讓你的留言評論更加的具有互動性嗎,那麼請仔細研究下本代碼吧。
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;
}
代碼奉上,具體如何使用,使用在何處,我就不多說了,小伙伴們自由發揮吧。