文本框滚动变化

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量76 收藏
点赞数
文章标签： xhtml javascript ViewUI

原始样式：（大家注意滚动条的变化）

代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!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 = "../scripts/jquery-1.3.1.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 >

 

snake_hand
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 实现元素颜色跟随滚动条变化
千祁的博客
09-02 2460
JS 实现元素颜色跟随滚动条变化灰色深浅变化。 滚动部分，计算出网页可以滚动的范围，同时监听滚动事件，然后使用计算颜色的变化，给目标加上相应的CSS样式即可。
Vue下textarea文本框根据内容自适应改变高度
10-20
Vue自定义组件实现文本框根据文本内容自适应高度的效果，解决若输入文本量或显示文本量超过指定行数后，会出现垂直滚动条，但在IE环境下，该滚动条是隐藏的问题。
C#(仿QQ)聊天窗口
dust__的博客
11-19 3712
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System....
scroll滚动，LI随滚动条自动变化
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
01-04 1519
scroll滚动，LI随滚动条自动变化 .sub_menu_frame { position: fixed; top: 50px; width: 280; height:400px; right:20px; overflow:auto; background: rgb(221, 221, 255); color: red; } h2 {color: green;margi
ScrollView自动滚动(内部控件内容发生变化时)的问题
qq_24084317的博客
08-10 1254
看到很多博客说在ScrollView的子布局里加入 android:focusable="true" android:focusableInTouchMode="true"   本人是一个Activity四个fragment，作为页卡切换。  在每个fragment的ScrollView下同上述代码写入，发现只有第一个fragment的ScrollView没有自动滚动，  第二个依然滚动，...
文本框的值随着选择框的值改变而改变
我行我能
09-04 1062
     function  onChange()   {  alert(fff);var    ddl = document.getElementById( "anclassid") ;alert(ddl);var   index = ddl.selectedIndex; var   Value =ddl.options[index].value; var    Text=  ddl.o
html卷轴展开,HTML文本框滚动代码4：卷轴变化应用
weixin_35843410的博客
06-02 276
this.p={ m:2,b:2,loftPermalink:'',id:'fks_094070082082085074083081087095083084084067083083082065',blogTitle:'HTML文本框滚动代码4：卷轴变化应用',blogAbstract:' ',blogTag:'html',blogUrl:'blog/static/72507542201118...
JQ 多行文本框高度变化
一直专注于互联网
04-30 273
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;文本框高度变化&lt;/title&gt; &lt;style type="text/css"&gt; * {
html中滑动文本框怎么写,html在文本框中加入滚动条
weixin_39933484的博客
05-31 2701
我们都知道大篇幅的文章会占据页面的大部分空间，从而影响页面整体的美观性，而通过为其添加一个带有滚动条的文本框，则能够很好地解决上述问题。下面就是相关语法：style='color: #ffffff;background-color: #000000;border: solid 2px black;width: 120px;height: 200px;overflow: scroll;scrollb...
HTML滚动条样式代码及使用技巧
01-08
在html网页中，我们都知道大篇幅的长文章会占据网页的大部分空间，影响了整体网站页面的美观性和阅读体验，因此，在html网页中添加一个带有滚动条的文本框，就可以很好地解决上述问题。网页滚动条本身就是浏览器的一...
textarea.zip
04-29
仿微信文本框，自动换行，动态高度，最大四行后滚动。 js监听textarea实时变化值，将textarea内容插入到一个和textarea相同大小的div中，且各属性相同，高度除外；之后将根据div的高度来给textarea的高度赋值，超出...
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
12-07
兼容IE/Firefox/Opera/Safari/Chrom 可定义滚动变化间隔值，支持整数、浮点数 双击恢复初始值 仅3.92K，压缩后2.67K 代码 代码如下: /* * cutePsWheel JS * Description:A js liabary which control the text type ...
Android实现数字跳动效果的TextView方法示例
01-04
前言 本文介绍的是Android如何实现数字跳动效果的TextView，主要运用了DancingNumberView，DancingNumberView是一个用于跳动显示文本中数字的控件，继承自TextView，这种控件一般用于显示金额等对用户较为敏感的...
jq代码学习10--文本框高度变化(内容滚动)
vvvbird的专栏
10-03 469
<!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-Ty
css引入方式有几种？link和@import有什么区别？
tianxianghuiwei的博客
06-13 297
link>标签和@import规则。<link>这种方式是在HTML文档的<head>部分或者XHTML文档的<head>或<body>部分添加<link>标签，通过href属性指定外部样式表的URL。<link>标签会在页面加载时同时加载并解析外部样式表，从而使得样式可以立即生效。@import@import规则是在CSS文件中使用的一种方式，用于引入外部样式表。它需要写在CSS文件的顶部（除了可能的@charset声明），并且只能引入一次。@import规则相对于<link>
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 622
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1357
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
html可滑动文本框
09-06
但是需要注意的是，有些浏览器在拖动滑动条时，文本框中的值会频繁变化，这样会引发频繁触发textchanged事件。为了解决这个问题，可以使用jQuery的change()事件来引起回发，而不是textchanged事件。 要实现带有滚动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值