参考博客：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. 海思HI3518EV200+AR0130开发板DIY——前篇

    海思HI3518EV200+AR0130开发板DIY 今天开始要围绕这个项目学习了(还是得从C开始学 ) 缘起(这段主要水废话)相关开发资料 →_→ 原理图设计 原理图整体框架 一.电源部分 HI35 ...

  2. redis（4）--redis集群之主从复制

    集群 先来简单了解下redis中提供的集群策略, 虽然redis有持久化功能能够保障redis服务器宕机也能恢复并且只有少量的数据损失,但是由于所有数据在一台服务器上,如果这台服务器出现硬盘故障,那就 ...

  3. inline以及inline-block行内元素：vertical-align属性

  4. sql语句对int类型进行模糊查询

    重点:select * from course where cast(courseId as char) like '%118%'; 首先可以将int类型转换为string类型的值再进行模糊查询,用方 ...

  5. Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError

    最新在学习Python的基础入门系列课程,今天学习到使用python 的内置库smtplib发送邮件内容. 使用Python发送邮件步骤简单: 创建SMTP连接 使用邮箱和密码登录SMTP服务器 创建 ...

  6. .get的取值特点：.get只起到取值的作用 不能对原值修改

    #银行支付接口 def pay_interface(username,cost): user_dic=db_handler.select(username) if user_dic.get('bala ...

  7. [译]C# 7系列，Part 9: ref structs ref结构

    原文:https://blogs.msdn.microsoft.com/mazhou/2018/03/02/c-7-series-part-9-ref-structs/ 背景 在之前的文章中,我解释了 ...

  8. python中super的用法实例解析

    概念 super作为python的内建函数.主要作用如下: 允许我们避免使用基类 跟随多重继承来使用 实例 在单个继承的场景下,一般使用super来调用基类来实现: 下面是一个例子: class Ma ...

  9. 【CV现状-3.0】"目标"是什么

    #磨染的初心--计算机视觉的现状 [这一系列文章是关于计算机视觉的反思,希望能引起一些人的共鸣.可以随意传播,随意喷.所涉及的内容过多,将按如下内容划分章节.已经完成的会逐渐加上链接.] 缘起 三维感 ...

  10. Task.Factory.StartNew 测试

    到底该用多少线程?线程数.CPU核心数.本地计算时间.等待时间的关系 线程数 = CPU核心数 * ( 本地计算时间 + 等待时间 ) / 本地计算时间 下面是Task.Factory.StartNe ...