小蜗牛xmg

jq小demo—文本框高度变化和滚动条高度变化 animate()动画（2017-01-07 18:40） 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<style type="text/css">
html{margin:0;padding:0;}
textarea{resize:none;}
</style>

<body>
<form>
<div class="msg">
	<div class="msg_caption">
		<span class="bigger">增大</span>
		<span class="smaller">缩小</span>
	</div>
	<textarea id="comment" rows="8" cols="20" >多行文本框高度变化,对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用对话聊天可用</textarea>
</div>
</form>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></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);
    		}
    	}
    });
    $(".smaller").click(function(){
    	if(!$comment.is(":animated")){
    		if($comment.height()>50){
    			$comment.animate({height:"-=50"},400);
    		}
    	}
    });
});
</script>

</body>
</html>
<form>
<div class="msg">
	<div class="msg_caption">
		<span class="up">向上</span>
		<span class="down">向下</span>
	</div>
	<textarea id="comment" rows="8" cols="20" >多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化,多行文本框高度变化</textarea>
</div>
</form>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></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>

　　





　　






		

			posted on 
2017-01-10 01:24 
小蜗牛xmg 
阅读(134) 
评论(0) 
 
收藏 
举报

		

	

	
	
	






    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    











	
		
		

导航