jQuery学习笔记9——多行文本框流动条高度变化
这个例子中用的是滚动条的scrollTop属性
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>多行文本框滚动条高度变化</title>
6<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
7<script type="text/javascript">
8
$(document).ready(function(){
9
var $comment = $("#comment");//获取评论框
10
$(".bigger").click(function(){//判断是否处于动画
11 if(!$comment.is(":animated")){
12 $comment.animate({scrollTop:"+=50"},400);
13
}
14 });//“放大”按钮绑定单击事件
15 $(".small").click(function(){//判断是否处于动画
16 if(!$comment.is(":animated")){
17 $comment.animate({scrollTop:"-=50"},400)
18 }
19 });//"缩小"按钮绑定单击事件
20
})
21</script>
22<style type="text/css">
23.msg_caption span{ background:#ccc; display:inline-block; width:60px; text-align:center; height:28px; line-height:28px; cursor:pointer;}
24</style>
25</head>
26<body>
27<form>
28<div class="msg">
29 <div class="msg_caption">
30 <span class="bigger">向下</span>
31 <span class="small">向上</span>
32 </div>
33 <div>
34 <textarea id="comment" rows="8" cols="20">
35 多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框
36 </textarea>
37 </div>
38</div>
39</form>
40</body>
41</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5
<title>多行文本框滚动条高度变化</title>6
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>7
<script type="text/javascript">8
$(document).ready(function(){
$(document).ready(function()
9
var $comment = $("#comment");//获取评论框10
$(".bigger").click(function(){//判断是否处于动画
11
if(!$comment.is(":animated")){12
$comment.animate({scrollTop:"+=50"},400);13
} 14
});//“放大”按钮绑定单击事件15
$(".small").click(function(){//判断是否处于动画16
if(!$comment.is(":animated")){17
$comment.animate({scrollTop:"-=50"},400)18
} 19
});//"缩小"按钮绑定单击事件20
}) 21
</script>22
<style type="text/css">23
.msg_caption span{ background:#ccc; display:inline-block; width:60px; text-align:center; height:28px; line-height:28px; cursor:pointer;}24
</style>25
</head>26
<body>27
<form>28
<div class="msg">29
<div class="msg_caption">30
<span class="bigger">向下</span>31
<span class="small">向上</span>32
</div>33
<div>34
<textarea id="comment" rows="8" cols="20">35
多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框36
</textarea>37
</div>38
</div>39
</form>40
</body>41
</html>