<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. 如何在不影响数据库的正常使用的情况下得到数据的完整.mdf和.ldf文

    一:完整备份数据库 二:还原数据库 四:分离数据库即可得到.mdf和.ldf文件

  2. HDOJ(HDU) 2139 Calculate the formula(水题，又一个用JavaAC不了的题目)

    Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) 看到这个时间,我懵逼了... 果然,J ...

  3. top -bcn -1

    ^[[?1h^[=^[[?25l^[[H^[[2J^[(B^[[mtop #!/bin/bash#echo 性能数据捕捉时间: `date +%Y-%m-%d_%H:%M:%S` \n >> ...

  4. 蘑菇街 App 的组件化之路

    在组件化之前,蘑菇街 App 的代码都是在一个工程里开发的,在人比较少,业务发展不是很快的时候,这样是比较合适的,能一定程度地保证开发效率. 慢慢地代码量多了起来,开发人员也多了起来,业务发展也快了起 ...

  5. Let it Bead

    http://poj.org/problem?id=2409 // File Name: poj2409.cpp // Author: bo_jwolf // Created Time: 2013年1 ...

  6. 如何提高Lucene构建索引的速度

    如何提高Lucene构建索引的速度 hans(汉斯) 2013-01-27 10:12 对于Lucene>=2.3:IndexWriter可以自行根据内存使用来释放缓存.调用writer.set ...

  7. DLL程序的创建步骤和測试程序

    首先,创建DLL程序 然后,加入一个导出类 比如: //Test.h #pragma once class AFX_EXT_CLASS Test { public:  Test(void);  ~Te ...

  8. MySQL 通配符学习小结

    MySQL 通配符 SQL的模式匹配同意你使用"_"匹配不论什么单个字符,而"%"匹配随意数目字符(包含零个字符).在 MySQL中,SQL的模式缺省是忽略大写 ...

  9. 9.14noip模拟试题

    中文题目名称 祖孙询问 比赛 数字 英文题目名称 tree mat num 可执行文件名 tree mat num 输入文件名 tree.in mat.in num.in 输出文件名 tree.out ...

  10. noip 2013 华容道

    /*双向bfs (得分和单项的一样多....)70*/ #include<iostream> #include<cstdio> #include<cstring> ...