参考博客：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. USB3.0之高速视频传输测试 双目相机（mt9p031、mt9m001）带宽高达300M测试 配合isensor测试 500万像素15fps

    最近完善了下USB3.0的视频开发测试,主要优化了FPGA程序和固件,及其同步方式.对带宽和图像效果进行了仔细的测试 开发板架构(2CMOS+FPGA+2DDR2+USB3.0) 评估板底板配合2个M ...

  2. Day 06 作业

    目录 Python基础实战之猜数字游戏 Python进阶实战之三级菜单 Python基础实战之猜数字游戏 给定数字,用户可以猜三次年龄 数字猜对,让用户选择两次奖励 用户选择奖励后可以退出 impor ...

  3. font-family与font-face的区别

    font-family:指定字体 设置后,电脑上无该字体时,观看网页不能显示该字体效果, 针对中文版操作系统,为保证网页效果,通常只指定:宋体.黑体.微软雅黑等系统上默认自带的字体. font-fac ...

  4. Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Linux下shell通用脚本启动jar（微服务）

    Linux下shell通用脚本启动jar(微服务) vim app_jar.sh #!/bin/bash #source /etc/profile # Auth:Liucx # Please chan ...

  6. SpringBoot SpringCloud 热部署 热加载 热调试

    疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] Crazy-Sp ...

  7. zookeeper扫盲

    一.zookeeper概述 a.zookeeper是一个开源的分布式的项目,为分布式业务提供协调服务的apache顶级项目 那什么是分布式的呢,通俗的说就是多个机器可以同时去处理一件事情 b.zook ...

  8. 【SHOI 2007】善意的投票

    Problem Description 幼儿园里有 \(n\) 个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照顾 ...

  9. Hack the Breach 2.1 VM (CTF Challenge)

    主机扫描: ╰─ nmap -p- -A 192.168.110.151Starting Nmap 7.70 ( https://nmap.org ) at 2019-08-29 09:48 CSTN ...

  10. mysql与python的交互

    mysql是一种关系型数据库,是为了表示事物与事物之间的关系,本身存于数据库中的内容意义并不大,所以广泛应用于编程语言中,python中九含有与MySQL交互的模块 pymysql 编程对mysql的 ...