参考博客：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. 基于icamera usb2.0的视频采集系统之mt9m001c12stc测评

    基于usb2.0的视频采集系统之mt9m001c12stc测评 因为该sensor不带isp,所以不支持白平衡,默认图像彩色颜色会和实际偏离,演示如下 颜色偏绿,所以降低该通道的增益,或者提供其他通道 ...

  2. python中bitmap的参数

    Tkinter Bitmaps: 你会使用这个属性显示一个位图.有以下类型的可用位图. 你会使用这个属性显示一个位图.有以下类型的可用位图.: "error" "gray ...

  3. 【Webpack】320- Webpack4 入门手册（共 18 章）（下）

    介绍 1. 背景 最近和部门老大,一起在研究团队[EFT - 前端新手村]的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平. 本文也是属于[E ...

  4. python学习-excel读取

    # 第三方库 openpyxl # install 安装# pip install openpyxl # 引入第三方库# excel操作的流程:# 打开excel,进入工作薄 workbook# 选择 ...

  5. Python异常体系结构图

  6. ASP.NET Core开发者指南（）

    你可以在下面找到一张图,该图展示了你可以选取的路径及你想学习的库,从而成为一名 ASP.NET Core 开发者.“作为 ASP.NET Core 开发者,我接下来应该学习什么?”,我把这张图作为建议 ...

  7. CreateDefaultBuilder方法都做了什么？

    当我们创建好一个新的ASP.NET Core Web应用时,系统会使用CreateDefaultBuilder方法,这个方法完成了以下操作: use Kestrel as the web server ...

  8. 一起学MyBatis之入门篇（2）

    概述 本文主要讲解MyBatis中类型转换的功能,其实在MyBatis中,提供了默认的数据类型之间的转换,但只是基本数据类型的转换,如果跨类型进行转换,则需要自定义转换类,如java中是boolean ...

  9. 浅析 Java 与 C++ 的垃圾回收机制

        Java老师在期末复习大纲上出了一道关于JVM垃圾回收机制的题目,想要我们简述一下JVM垃圾回收机制,与老师交流后,大概老师是希望通过与其他语言在垃圾回收对比,介绍一下Java在这方面的特点和 ...

  10. 扫描枪连接zebra打印机打印条码标签无需电脑

    在一些流水线生产的现场,需要及时打印条码标签,由于现场环境和空间限制,无法摆放电脑或者通过连接电脑来打印条码标签的速度太慢, 瑞科条码特提供了一套扫描枪直接连接条码打印机,扫描枪扫描条码之后直接打印输 ...