基于jQuery實現(xiàn)文本框縮放以及上下移動功能
更新時間:2014年11月24日 14:56:53 投稿:hebedich
這里給大家分享一段個人覺著非常實用也經(jīng)常用于項目中的代碼,本代碼基于jQuery實現(xiàn)了文本框縮放以及上下移動功能,給需要的網(wǎng)友們參考下吧
想讓你的網(wǎng)頁更加的炫酷,想讓你的留言評論更加的具有互動性嗎,那么請仔細研究下本代碼吧。
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">
水電費水電費爽膚水法薩芬沙發(fā)放松放松沙發(fā)
當爽膚水飛沙發(fā)發(fā)沙發(fā)發(fā)發(fā)發(fā)
水電費水電費爽膚水法薩芬沙發(fā)放松放松沙發(fā)
當爽膚水飛沙發(fā)發(fā)沙發(fā)發(fā)發(fā)發(fā)
</textarea>
</div>
</div>
CSS代碼:
復制代碼 代碼如下:
.bigger , .down , .up , .smaller{
background-color: #f1a55c;
}
代碼奉上,具體如何使用,使用在何處,我就不多說了,小伙伴們自由發(fā)揮吧。
相關(guān)文章
jquery實現(xiàn)checkbox 全選/全不選的通用寫法
本篇文章主要是對jquery實現(xiàn)checkbox 全選/全不選的通用寫法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02Query常用DIV操作獲取和設置長度寬度的實現(xiàn)方法
下面小編就為大家?guī)硪黄猀uery常用DIV操作獲取和設置長度寬度的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09jQuery獲取文本節(jié)點之 text()/val()/html() 方法區(qū)別
在jquery中val,text,html都能取到值,或加一個參數(shù)來賦值,那么它們有些什么區(qū)別?2011-03-03