参考博客：https://blog.csdn.net/yubo_725/article/details/52839493  大佬是真的厉害，保存一下，以方便后续使用

效果：

源码：

<!DOCTYPE html>

<html lang="zh-cn">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap  Template</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <style type="text/css">

        .content {

            width: 500px;

            margin: 50px 50px;

        }

        .header {

            line-height: 50px;

            background-color: #ECECEC;

        }

        .data {

            height: 300px;

            overflow: hidden;

        }

    </style>

  </head>

  <body>

    <div class="content">

        <div class="header row">

            <div class="col-md-3">姓名</div>

            <div class="col-md-3">性别</div>

            <div class="col-md-3">年龄</div>

            <div class="col-md-3">职业</div>

        </div>

        <div class="data">

            <div class="data-content">

                <table class="table table-hover">

                </table>

            </div>

            <div class="data-footer"></div>

        </div>

    </div>

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        var html = '';

        for(var i = ; i < ; i++) {

            html += '<tr>';

            html += '<td>数学' + i + '</td>';

            if(i %  == ) {

                html += '<td>男</td>';

            } else {

                html += '<td>女</td>';

            }

            html += '<td>' + ( + i) + '</td>';

            html += '<td>数学老师</td>';

            html += '</tr>';

        }

        $('.table').html(html);

        $('td').addClass('col-md-3');

        var dataDOM = $('.data')[];

        var dataContentDOM = $('.data-content')[];

        var dataFooterDOM = $('.data-footer')[];

        var height = dataDOM.offsetTop + dataDOM.offsetHeight;

        setInterval(function() {

            if(dataFooterDOM.offsetTop - dataDOM.scrollTop - height <= ) {

                dataDOM.scrollTop -= dataContentDOM.offsetHeight;

            } else {

                dataDOM.scrollTop++;

            }

        }, );

    </script>

  </body>

</html>

JS表单内容垂直循环滚动的更多相关文章

  1. html固定表头，表单内容垂直循环滚动

    <!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8 ...

  2. js 表单内容使用ajax以json格式混合提交

    脚本代码 function submitForm(){    var post_data = $("#form1").getdict();    var data_dict = { ...

  3. Ajax提交form表单内容和文件（jQuery.form.js）

    jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...

  4. js控制select选中显示不同表单内容

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

  5. js实现表单验证 常用JS表单验证

    CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...

  6. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  7. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  8. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

  9. Vue.js表单校验；动画指令；避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

随机推荐

  1. Django异步任务线程池

    当数据库数据量很大时(百万级),许多批量数据修改请求的响应会非常慢,一些不需要即时响应的任务可以放到后台的异步线程中完成,发起异步任务的请求就可以立即响应 选择用线程池的原因是:线程比进程更为可控.不 ...

  2. python + selenium WebDriver的环境配置

    想试用python语言来学习selenium WebDriver,首先需要搭建一个测试环境,从python安装到浏览器插件配置的详细步骤,总结如下: 一.python环境配置 1.从官网下载最新的一个 ...

  3. 【玩转SpringBoot】给自动配置来个整体大揭秘

    上一篇文章中提到的条件注解,只是自动配置整体解决方案中的一个环节而已,可以说是管中窥豹. 本文就逐步擦除迷雾,让整体浮现出来,这样就会有一个宏观的认识. 除了写代码之外,还能干点什么? 提到“配置”这 ...

  4. Vue项目无法使用局域网IP直接访问的配置方法

    一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的,比如 192.168.1.11:8080 .但是最近公司的一个项目只可以通过 localhost 访问. 需要配置一下,才可直接 ...

  5. 面试连环炮系列（十四）： HTTP状态码302的跳转逻辑

    HTTP状态码302的跳转逻辑 302状态码表示重定向,浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址,这个地址可以从响应的Location首部中获取(用户看到的效果就是他输入的地 ...

  6. CouchDB学习一

    端口 端口号 协议 作用 5984 tcp 标椎集群端口用于所有的HTTP API请求 5986 tcp 用于管理员对节点与分片的管理 4369 tcp Erlang端口到daemon的映射 配置介绍 ...

  7. springmvc: No converter found for return value of type

    刚开始学习springmvc的童鞋,相信很多都需要过这种情况,报错信息如下 org.springframework.http.converter.HttpMessageNotWritableExcep ...

  8. 百度大脑UNIT3.0智能对话技术全面解析

    智能客服.智能家居.智能助手.智能车机.智能政务……赋予产品智能对话能力是提升产品智能化体验.高效服务的重要手段,已经开始被越来越多的企业关注并布局.然而,智能对话系统搭建涉及NLP.知识图谱.语音等 ...

  9. CodeForces - 158C（模拟）

    题意 https://vjudge.net/problem/CodeForces-158C 你需要实现类似 Unix / Linux 下的 cd 和 pwd 命令. 一开始,用户处于根目录 / 下. ...

  10. JavaScript实例：运动的小球

    本篇博文通过制作一个小球运动动画的实例,来学习在HTML5的画布上实现动画制作的方法,同时理解面向对象程序设计的基本思想. 1．绘制小球 先在HTML页面中设置一个画布. <canvas id= ...