jQuery适时控制文本域内容上下滚动
jQuery适时控制文本域内容上下滚动,多行文本框适时高度变化,引入了jQuery,加入了动画效果,点击“向上”按钮,文本框内的内容就会慢慢的向上滚动,点击“向下”则向下滚动。主要是学习一下按钮单击事件的绑定。
jQuery适时控制文本域内容上下滚动,多行文本框适时高度变化,引入了jQuery,加入了动画效果,点击“向上”按钮,文本框内的内容就会慢慢的向上滚动,点击“向下”则向下滚动。主要是学习一下按钮单击事件的绑定。
答案:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<!-- 引入jQuery -->
<script src="http://www.zzzyk.com/ajaxjs/jquery1.3.2.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">站长资源库(www.zzzyk.com)提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等,做有质量的学习型源码下载站。站长资源库(www.zzzyk.com)提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等,做有质量的学习型源码下载站。
</textarea>
</div>
</div>
</form>
</body>
</html>
上一个:变换的下拉选择菜单
下一个:模拟淘宝网的多级选择菜单