基于jQuery實現(xiàn)文本框縮放以及上下移動功能
更新時間：2014年11月24日 14:56:53 投稿：hebedich
這里給大家分享一段個人覺著非常實用也經(jīng)常用于項目中的代碼，本代碼基于jQuery實現(xiàn)了文本框縮放以及上下移動功能，給需要的網(wǎng)友們參考下吧
想讓你的網(wǎng)頁更加的炫酷，想讓你的留言評論更加的具有互動性嗎，那么請仔細(xì)研究下本代碼吧。
jQuery代碼：
復(fù)制代碼 代碼如下:
$(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代碼：
復(fù)制代碼 代碼如下:
<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ā)
當(dāng)爽膚水飛沙發(fā)發(fā)沙發(fā)發(fā)發(fā)發(fā)
水電費水電費爽膚水法薩芬沙發(fā)放松放松沙發(fā)
當(dāng)爽膚水飛沙發(fā)發(fā)沙發(fā)發(fā)發(fā)發(fā)
</textarea>
</div>
</div>
CSS代碼：
復(fù)制代碼 代碼如下:
.bigger , .down , .up , .smaller{
background-color: #f1a55c;
}
代碼奉上，具體如何使用，使用在何處，我就不多說了，小伙伴們自由發(fā)揮吧。
相關(guān)文章
20款非常優(yōu)秀的 jQuery 工具提示插件 推薦
工具提示（Tooltip）在網(wǎng)站中的一個小功能，但卻有很重要的作用，常用于顯示一些溫馨的提示信息。如果網(wǎng)站中的工具提示功能做得非常有創(chuàng)意的話能夠加深用戶對網(wǎng)站印象2012-07-07
jquery 顯示本地時間/ 帶日期、星期/ UTC，需要的朋友可以參考下。2011-05-05
jQuery確實是一個挺好的輕量級的JS框架，能幫助我們快速的開發(fā)JS應(yīng)用，并在一定程度上改變了我們寫JavaScript代碼的習(xí)慣。2011-04-04
jQuery+CSS實現(xiàn)的標(biāo)簽頁效果示例【測試可用】
這篇文章主要介紹了jQuery+CSS實現(xiàn)的標(biāo)簽頁效果,涉及基于jQuery的事件綁定、頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery電話號碼驗證實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
jquery根據(jù)td給相同tr下其他td賦值的實現(xiàn)方法
下面就為大家?guī)硪黄猨query根據(jù)td給相同tr下其他td賦值的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了jquery圖片預(yù)覽插件的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了jquery+css實現(xiàn)移動端元素拖動排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
jQuery 打造動態(tài)漸變按鈕 詳細(xì)圖文教程
這是寫給web設(shè)計者和前端開發(fā)者的教程，我們將演示如何使用Photoshop創(chuàng)建按鈕的sprite圖，然后是如何使用jQurey打造動態(tài)漸變效果。2010-04-04
JQuery將文本轉(zhuǎn)化成JSON對象需要注意的問題
在JQuery的許多方法中，很多方法的參數(shù)可以傳入一個JSON對象，比如Ajax方法的第二個參數(shù)。怎么將文本轉(zhuǎn)化成JSON對象，需要注意以下問題2011-05-05