单行文本框、多行文本框及滚动条的应用

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
 .focus{
  border: 1px solid #f00;
  background: #fcc;
 }
 input, textarea{
  width:12em;
  border: 1px solid #888;
 }

 div{
    padding:2px;
 
 * { 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 type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript">
 $(function(){
  $(":input").focus(function(){
   $(this).addClass("focus");
  }).blur(function(){
   $(this).removeClass("focus");
  });
  

  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.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);
   }
  })
 })
</script>
</head>

<body>

 <form action="#" method="post" id="regForm">
  <fieldset>
   <legend>个人基本信息</legend>
   <div>
    <label for="username">名称:</label>
    <input id="username" type="text">
   </div>
   <div>
    <label for="pass">密码:</label>
    <input id="pass" type="password">
   </div>
   <div>
    <label for="msg">详细信息:</label>
    <textarea id="msg"></textarea>
   </div>
  </fieldset>
  
  <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="80">ssssssssssdsssssssdaffsdfsdfs</textarea>
  </div>
 </form>
</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值