<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1{

    width:30px;

    height:500px;

    background:#000;

    position:absolute;

    left:10px;

    top:10px;

    }

#div2{

    width:30px;

    height:30px;

    position:absolute;

    background:red;

    left:0px;

    top:0px;

    }

#div3{

    width:498px;

    border:1px #ccc solid;

    height:498px;

    position:absolute;

    left:50px;

    top:10px;

    overflow:hidden;

    }

#div4{

    position:absolute;

    }

textarea{

    position:absolute;

    left:50px;

    top:550px;

    width:500px;

    height:200px;

    }

</style>

<script>

window.onload = function ()

{

    var odiv1 = document.getElementById('div1');

    var odiv2 = document.getElementById('div2');

    var odiv3 = document.getElementById('div3');

    var odiv4 = document.getElementById('div4');

    var otext = document.getElementsByTagName('textarea')[0];

    var ratio = odiv3.clientHeight / odiv4.offsetHeight > 1 ? 1 : odiv3.clientHeight / odiv4.offsetHeight; 

    function barheight()

    {

        var ratio = odiv3.clientHeight / odiv4.offsetHeight > 1 ? 1 : odiv3.clientHeight / odiv4.offsetHeight;

        odiv2.style.height = odiv1.clientHeight * ratio + 'px';

    }

    barheight();

    otext.onkeyup = function ()

    {

        odiv4.innerHTML = otext.value;

        barheight();

    }

    odiv2.onmousedown = function (ev)

    {

        var ev = ev || event;

        var diy = ev.clientY - this.offsetHeight;

        if(odiv2.setCapture)

        {

            odiv2.setCapture();

        }

        document.onmousemove = function (ev)

        {

            var ev = ev || event;

            var T = ev.clientY - diy;

            var maxTop = odiv1.offsetHeight - odiv2.offsetHeight;

            if(T < 0 )

            {

                T = 0;

            }

            if(T > maxTop)

            {

                T = maxTop;

            }

            odiv2.style.top = T + 'px';

            odiv4.style.top = (odiv3.clientHeight - odiv4.offsetHeight)*(T/maxTop) + 'px';

        };

        document.onmouseup = function ()

        {

            document.onmousedown = document.onmousemove = null;

            if(odiv2.releaseCapture)

            {

                odiv2.releaseCapture();

            }

        }

        return false;

    }

};

</script>

</head>

<body>

    <div id="div1">

        <div id="div2"></div>

    </div>

    <div id="div3">

        <div id="div4"></div>

    </div>

    <textarea placeholder="请在文本框输入文字"></textarea>

</body>

</html>

dom 输入文字模拟滚动的更多相关文章

  1. Java Swing 如何添加输入文字并且可以滚动的文本框？( JTextArea ,JScrollPane的使用）

    准备: JTextArea 文本区,一个可以输入文字的文本框 常用方法: 1.setText(String t)设置文本区中显示的文本 2.getText() 获取文本区中显示的文本 JScrollP ...

  2. 微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定

    1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...

  3. 利用js来实现文字的滚动（也就是我们常常见到的新闻版块中的公示公告）

    首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...

  4. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  5. iOS webView与js交互在文本空格上输入文字

    项目要求:webview加载html网址,内容为填空题型文本,需要在横线上添加答案,并点击提交按钮后再将答案进行回显 正常加载的效果图片: 这个是用js交互后的效果图: 点击空格,输入想输入的答案,如 ...

  6. jQuery实现公告文字左右滚动

    jQuery实现公告文字左右滚动的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  7. jquery文字上下滚动的实现方法

    jquery实现文字上下滚动的方法. 代码: //上下滚动var textRoll=function(){$('#notice p:last').css({'height':'0px','opacit ...

  8. jquery文字左右滚动

    实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText" ...

  9. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

随机推荐

  1. 谈谈Perforce

    实习就要结束了,收获之一就是学会了使用Perforce! Perforce SCM System是一款构建于可伸缩客户/服务器结构之上的软件配置管理工具.仅仅应用 TCP/IP,开发人员就能够通过多种 ...

  2. STL容器的遍历删除

    STL容器的遍历删除 今天在对截包程序的HashTable中加入计时机制时,碰到这个问题.对hash_map中的每个项加入时间后,用查询函数遍历hash_map,以删除掉那些在表存留时间比某个阈值长的 ...

  3. Qt环境搭建（Visual Studio）

    简述 经常有人问我编写Qt程序时使用什么IDE,其实这个真的很难回答(各有所长),只能说看个人爱好了,因为我两个都用,而且两个都很喜欢(比较多情吧O(∩_∩)O~)! 下面将进行Qt Creator与 ...

  4. 用HTML5 Canvas为网页添加动态波浪背景

    查看所有代码请去Github 本文出自 “UED” 博客:http://5344794.blog.51cto.com/5334794/1430877 <!DOCTYPE html> < ...

  5. 一个简单的ORM制作(CURD操作类)

    SQL执行类 CURD操作类 其他酱油类 此篇是为上篇文章填坑的,不知道上篇砸过来的砖头够不够,不够的话请大家继续砸. CURD操作类负责将用户提供的条件转换为SQL语句,并提供给IHelper执行, ...

  6. POJ2886 Who Gets the Most Candies? 线段树 反素数

    题意:有一群小朋友围成一个环,编号1,2,3…N.每个人手上握着一个非0的数字,首先第K个人出列,然后看他手上的数字,假设为m,则从下一个开始第m个人出列,一直如此.并设i为小于等于N的最大反素数,问 ...

  7. 30个实用的Linux find命令

    除了在一个目录结构下查找文件这种基本的操作,你还可以用find命令实现一些实用的操作,使你的命令行之旅更加简易.本文将介绍15种无论是于新手还是老鸟都非常有用的Linux find命令 . 首先,在你 ...

  8. 【同行说技术】iOS程序员从小白到大神必读资料汇总

    在文章<iOS程序员从小白到大神必读资料汇总(一)>里面介绍了很多iOS入门学习的资料,今天小编就发几篇技术进阶的文章,快来看看吧! 一.iOS后台模式开发指南 这个教程会教你在什么时候怎 ...

  9. DOM对象常用对象的方法和属性

      HTML文档中的常用节点类型: 接口 nodeType 备注 Element 1 元素节点 Text 3 文本节点 Document 9 Document Comment 8 注释文本 Docum ...

  10. activiti 源码笔记之startProcess

    rumtimeService.startProcessInstanceByXX方法将启动流程的任务委派给StartProcessInstanceCmd,此时会根据rumtimeService.star ...