JQ 多行文本框高度变化

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框高度变化</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	font: normal 12px/17px Arial;
}
.msg {
	width: 300px;
	margin: 100px;
}
.msg_caption {
	width: 100%;
	overflow: hidden;
	margin-bottom: 1px;
}
.msg_caption span {
	display: block;
	float: left;
	margin: 0 2px;
	padding: 4px 10px;
	background: #898989;
	cursor: pointer;
	color: white;
}
.msg textarea {
	width: 300px;
	height: 80px;
	height: 100px;
	border: 1px solid #000;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	var $comment = $('#comment'); //获取评论框
	$('.bigger').click(function(){ //放大按钮绑定单击事件
		if( $comment.height() < 500 ){ 
			$comment.height(  $comment.height() + 50 ); //重新设置高度，在原有的基础上加50
		}
	})
	$('.smaller').click(function(){ //缩小按钮绑定单击事件
		if( $comment.height() > 50 ){
			$comment.height( $comment.height() - 50 ); //重新设置高度，在原有的基础上减50
		}
	});
});
</script>
</head>
<body>
<form action="" method="post">
    <div class="msg">
        <div class="msg_caption"> <span class="bigger" >放大</span> <span class="smaller" >缩小</span> </div>
        <div>
            <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
        </div>
    </div>
</form>
</body>
</html>

效果图：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框高度变化</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	font: normal 12px/17px Arial;
}
.msg {
	width: 300px;
	margin: 100px;
}
.msg_caption {
	width: 100%;
	overflow: hidden;
	margin-bottom: 1px;
}
.msg_caption span {
	display: block;
	float: left;
	margin: 0 2px;
	padding: 4px 10px;
	background: #898989;
	cursor: pointer;
	color: white;
}
.msg textarea {
	width: 300px;
	height: 80px;
	height: 100px;
	border: 1px solid #000;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	var $comment = $('#comment');  //获取评论框
	$('.bigger').click(function(){ //放大按钮绑定单击事件
		if(!$comment.is(":animated")){ //判断是否处于动画
			if( $comment.height() < 500 ){ 
				$comment.animate({ height : "+=50" },400); //重新设置高度，在原有的基础上加50
			}
		}
	})
	$('.smaller').click(function(){//缩小按钮绑定单击事件
		if(!$comment.is(":animated")){//判断是否处于动画
			if( $comment.height() > 50 ){
				$comment.animate({ height : "-=50" },400); //重新设置高度，在原有的基础上减50
			}
		}
	});
});
</script>
</head>
<body>
<form action="" method="post">
    <div class="msg">
        <div class="msg_caption"> <span class="bigger" >放大</span> <span class="smaller" >缩小</span> </div>
        <div>
            <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
        </div>
    </div>
</form>
</body>
</html>

效果图：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框内容滚动</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	font: normal 12px/17px Arial;
}
.msg {
	width: 300px;
	margin: 100px;
}
.msg_caption {
	width: 100%;
	overflow: hidden;
	margin-bottom: 1px;
}
.msg_caption span {
	display: block;
	float: left;
	margin: 0 2px;
	padding: 4px 10px;
	background: #898989;
	cursor: pointer;
	color: white;
}
.msg textarea {
	width: 300px;
	height: 80px;
	height: 100px;
	border: 1px solid #000;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	var $comment = $('#comment');//获取评论框
	$('.up').click(function(){ //向上按钮绑定单击事件
		if(!$comment.is(":animated")){//判断是否处于动画
			$comment.animate({ scrollTop  : "-=50" } , 400);
		}
	})
	$('.down').click(function(){//向下按钮绑定单击事件
		if(!$comment.is(":animated")){
			$comment.animate({ scrollTop  : "+=50" } , 400);
		}
	});
});
</script>
</head>
<body>
<form action="" method="post">
    <div class="msg">
        <div class="msg_caption"> <span class="up" >向上</span> <span class="down" >向下</span> </div>
        <div>
            <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
        </div>
    </div>
</form>
</body>
</html>

效果图：

JQ 多行文本框高度变化

猜你喜欢