<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="../../scripts/jquery.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>

jquery 实现文本框scroll上下动的更多相关文章

  1. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  2. jquery获取文本框的内容

    使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...

  3. jQuery清除文本框，内容并设置不可用

    JQuery清除文本框,内容并设置不可用  如果是设置只读,则将disabled换成readonly function CleanText(textid) { $("#"+text ...

  4. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

  5. JQuery 限制文本框只能输入数字和小数点

    $(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).v ...

  6. JQuery限制文本框只能输入数字和小数点的方法

    <input type="text" class="txt NumText"  Width="100px"  /> $(func ...

  7. jQuery限制文本框的输入长度

    jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-val ...

  8. jQuery监控文本框事件并作相应处理的方法

    本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document)  .on('input propertychange', '#que ...

  9. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Spring与Hibernate集成中的Session问题

    主要讨论Spring与Hibernate集成中的session问题 1．通过getSession()方法获得session进行操作 public class Test extends Hibernat ...

  2. poj1023

    题目大意:有趣的数字系统 在一个k位的2的补码,,位的索引是从0到k-1位的,值是-2^(k-1),其他位置的i是2^i( (0 ≤ i < k-1) ),例如,3位的数字101是-2^2 + ...

  3. oracle 大文本由clob来存

    file字段是varchar2类型(最多只能存储4000字符),空间不够用了,因此将其改为clob类型(支持4G存储量). 但是如果该字段中已经有数据,是不为空的,直接用语句改,会报错. 那么需要借助 ...

  4. 【转】Android开发中的SQLite事务处理，即beginTransaction()方法

    使用SQLiteDatabase的beginTransaction()方法可以开启一个事务,程序执行到endTransaction() 方法时会检查事务的标志是否为成功,如果程序执行到endTrans ...

  5. Qt 学习之路：线程和事件循环

    前面一章我们简单介绍了如何使用QThread实现线程.现在我们开始详细介绍如何“正确”编写多线程程序.我们这里的大部分内容来自于Qt的一篇Wiki文档,有兴趣的童鞋可以去看原文. 在介绍在以前,我们要 ...

  6. java内存不足

    -Xmx1024m -Xms1024m -XX:PermSize=128m -XX:MaxPermSize=512m ------------------------- 亲测可用

  7. Java基础知识强化之集合框架笔记11：Collection集合之迭代器的原理及源码解析

    1. 迭代器为什么不定义成一个类,而是定义为一个接口 ?  答:假设迭代器定义的是一个类,这样我们就可以创建该类的对象,调用该类的方法来实现集合的遍历.但是呢? 我们想想,Java中提供了很多的集合类 ...

  8. Creating a Background Service ——IntentService

    The IntentService class provides a straightforward structure for running an operation on a single ba ...

  9. 格雷码（Gray Code）转二进制码（Binary Code）

    学习verilog generate语句时,偶然看到用generate语句来进行格雷码到二进制码转换的代码,就从网上找了一些案例来学习. 下表为几种自然二进制码与格雷码的对照表: 十进制数 自然二进制 ...

  10. javascript 动态控制复选框的选择和取消

    这里就需要引入一个jquery-1.4.2.js 就行了,因为用到了里面的选择器 <html> <head> <script type="text/javasc ...