JS表单内容垂直循环滚动
参考博客: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表单内容垂直循环滚动的更多相关文章
- html固定表头,表单内容垂直循环滚动
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8 ...
- js 表单内容使用ajax以json格式混合提交
脚本代码 function submitForm(){ var post_data = $("#form1").getdict(); var data_dict = { ...
- 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 ...
- js控制select选中显示不同表单内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现表单验证 常用JS表单验证
CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- JS表单验证类HTML代码实例
以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...
- Vue.js表单校验;动画指令;避免内存泄露。
Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...
随机推荐
- [vue]初探vue生态核心插件Vuex
为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...
- HTML 02
form表单 能够获取用户输入(包括输入, 选择和上传文件) 将用户的输入内容全部发送给后端 参数 action 向何处提交 不写, 默认朝当前页面所在地址提交数据 全写路径 (https://www ...
- 解决:Sass Loader has been initialised using an options object that does not ma tch the API schema.
今天是犯傻的一天,第一回用sass遇到了bug: 结果就是:<style lang = 'scss'>.写成了<style lang = 'sass'> (脑子要清醒一点.太笨 ...
- 6种微服务RPC框架,你知道几个?
开源 RPC 框架有哪些呢? 一类是跟某种特定语言平台绑定的,另一类是与语言无关即跨语言平台的. 跟语言平台绑定的开源 RPC 框架主要有下面几种. Dubbo:国内最早开源的 RPC 框架,由阿里巴 ...
- Redis来啦~~
一. 先聊点别的 1. sql & nosql sql指关系型数据库,如Oracle,MySQL等,nosql泛指非关系型数据库,如MongoDB,Redis等:SQL数据存在特定结构的表中, ...
- 4、看源码MVC Controller如何调用Action
Controller继承ControllrBase,ControllerBase继承IController,而IController里只有一个Execute方法 1.ControllrBase里的Ex ...
- 拖动条(SeekBar)的功能与用法
拖动条和进度条非常相似,只是进度条采用颜色填充来表明进度完成的程度,而拖动条则通过滑块的位置来标识数值——而且拖动条允许用户拖动滑块来改变值,因此拖动条通常用于对系统的某种数值进行调节,比如调节音量等 ...
- Shell(六):输入/输出重定向
重定向的作用是将命令的执行结果输出到指定的文件中. 重定向命令列表如下: 文件描述符 0 通常是标准输入(STDIN),1 是标准输出(STDOUT),2 是标准错误输出(STDERR). 1.输出重 ...
- Aery的UE4 C++游戏开发之旅(2)编码规范
目录 C++基础类型规范 命名规范 头文件规范 字符串规范 字符集规范 参考 C++基础类型规范 由于PC.XBOX.PS4等各平台的C++基础类型大小可能不同(实际上绝大部分都是整型类型的大小不同) ...
- PHP使用递归按层级查找数据
今天主要介绍一下使用递归来按层级查找数据.原理挺简单的,主要是通过父级id一级一级的循环查找子级,使用PHP循环代码也很容易实现,不过如果层级越多,PHP重复代码也越多,这时可以使用递归来实现这功能. ...