jquery 实现文本框scroll上下动

时间：2022-05-09 09:42:57
<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&sol;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. http协议 幂等性的理解

    HTTP GET.DELETE.PUT.POST四种主要方法的幂等性的理解 GET: GET请求是幂等的,多次的GET请求,不应该修改数据状态,只是查询. DELETE Delete请求也具有幂等性, ...

  2. PHP学习之一晚撸下W3chscool

    PHP 多维数组 其实简单的而言,多维数组就是由单个的数组组成的,两个数组嵌套组成一个二维数组,三个顾名思义就是三维数组. 先来一个简单的数组. 数字是key,引号里的是value <?php ...

  3. Android引用百度定位API第三方组件后导致其它&period;so文件无法正常加载的问题

    查看当前调试设备CPU架构的方法: adb.exe shell getprop ro.product.cpu.abi  (一般返回值为:armeabi-v7a) adb.exe shell getpr ...

  4. Java当中的运算符

    一.关于Java当中运算符的分类 算术运算符:+,-,*,/.%(是取余运算符读莫).++.-- 关系运算符:>.<.>=.<=.!=(不等).==(等于) 布尔运算符:!(非 ...

  5. 视频日志之android的总结与思考

    四月份开始学android,并着手做这个项目,腾讯面试实习忙了半个月没有再做最终铩羽而归.做到5月30日,做了一个交差版,停下了差不多一个月,这两天再捡起完善一点. 项目是做一个视频保存和分享的网站, ...

  6. for循环语句

    for循环格式:  for(表达式1:表达式2:表达式3)        {             循环语句        } 1.首先计算表达式1的值. 2.再计算表达式2 的值,若值为真(非0) ...

  7. swift 之函数式编程（一）

    1. 什么是函数式编程? 函数式编程是阿隆佐思想的在现实世界中的实现, 它将电脑运算视为数学上的函数计算,并且避免使用程序状态以及异变物件. 函数式编程的最重要基础是λ演算.而且λ演算的函數可以接受函 ...

  8. eclipse的基本使用和配置

    在workspace中src目录下的文件是java文件,bin目录下是class文件 1:基本使用 A:创建Java项目: 点击File或者在最左侧空白处,选择Java项目,在界面中写一个项目名称,然 ...

  9. python基础语法及知识点总结

    本文转载于星过无痕的博客http://www.cnblogs.com/linxiangpeng/p/6403991.html 在此表达对原创作者的感激之情,多谢星过无痕的分享!谢谢! Python学习 ...

  10. 浅谈Objeact&period;clone克隆（纯个人理解，如有错误请指正）

    现在先来看一下jdk给出的Object.clone源码和注释 /** * Creates and returns a copy of this object. The precise meaning ...

相关文章