table头部固定,内容滚动,类似新闻一下向上滚动
html:
<div class="ul_box">
<table class="table1">
<thead>
<tr>
<th>11111111111</th>
<th>11111111111</th>
<th>11111111111</th>
<th>11111111111</th>
</tr>
</thead>
</table>
<div class="hide">
<table class="table2">
<tr>
<td>唐女士</td>
<td>137****2580</td>
<td>诊断:00****</td>
<td> 结果:<font class="red">持股待涨</font></td>
</tr>
<!-- 省略下面的..... -->
</table>
</div>
</div>
css:
.hide {
width: 1030px;
height: 150px;
overflow: hidden;
}
.table2 {
position: relative;
border-top: none;
border-bottom: none !important;
}
js:
var num = 0, timer3;
function table() {
timer3 = setInterval(function() {
// num 每行的高度
num += 20;
// if 里面的高度是要减去重复的高度
if(num == 300) {
num = 20;
$('.table2').css('top', 0 + 'px');
}
$('.table2').animate({top: -num+'px'}, 500,"linear",function (){});
}, 1000)
}
table();
table头部固定,内容滚动,类似新闻一下向上滚动的更多相关文章
- table头部固定,内容滚动
可以设置两个table,th,td得设置宽度: <table> <thead> <tr><th></th&g ...
- table表格固定前几列,其余的滚动
我查了好多资料,只找到一个demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""h ...
- jQuery div内容间隔1秒动态向上滚动HTML、JS代码
demo1: <!DOCTYPE html> <html> <head> <title>div内容间隔1秒动态滚动</title> < ...
- 实现html表头固定,表格内的信息向上滚动
效果如下: <!doctype html>Table header header two fuck 1 fuck 2 fuck 1 fuck 2 fuck 1 fuck 2 fuck 1 ...
- table头部、尾部固定;中间内容定高自适应滚动
table头部.尾部固定;中间内容定高自适应滚动 很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现 工作过程中遇到了,作为一个小笔记,备忘! 如下图所示 --------- ...
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...
- 网页制作中在头部固定悬浮table表头(thead)的方法
这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...
- 用js实现table内容从下到上连续滚动
网上有很多用ul实现新闻列表滚动的例子,但是很少有直接用table实现列表内容滚动的例子,而Marquee标签滚动的效果不是很好,于是就自己写了一个,提供给攻城师朋友们参考 实现思路:由于table包 ...
- div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
随机推荐
- 记录21.07.21 —— ES6基础
学习目录 课件地址: ES6核心技术课件 1.let关键字 1.1 let与var的区别 ①let不能重复定义 ②块作用域的区别 ③变量声明之前let不能使用,var可以 ④ 课件代码 <htm ...
- 手写Pascal解释器(一)
目录 一.编写解释器的动机 二.part1 三.part2 四.part3 一.编写解释器的动机 学习了Vue之后,我发现对字符串的处理对于编写一个程序框架来说是非常重要的,就拿Vue来说,我们使用该 ...
- Yara规则学习
01 定义 官网: YARA is a tool aimed at (but not limited to) helping malware researchers to identify and c ...
- vue页面初始化
HTML: <div id="app"> <input type="" class="app" v-model=" ...
- docker容器网络bridge
我们知道docker利用linux内核特性namespace实现了网络的隔离,让每个容器都处于自己的小世界里面,当这个小世界需要与外界(宿主机或其他容器)通信的时候docker的网络就发挥作用了,这篇 ...
- CCS box-flex属性
box-flex==按比例分配父标签的宽度or高度空间 1.非固定分配 eg.一块地总150平方分配给三孩子,按照2:1:1分 #老大 { 房子-分配: 2; } = 75平 #老二 { 房子-分配: ...
- RHCSA_DAY03
cd 切换工作目录命令 cd(英文全拼:change directory)切换目录 命令格式:cd [-选项] [目录名] 提示:目录名称可以是绝对路径或相对路径,如果不指定目录名称,则切换到当前用户 ...
- ffuf 基础食用指南
PS: 1. 下文出现的某些字典 有可能是因为摆出效果 我自己瞎搞得字典 2. 分享一些好的工具 3. 其实Wfuzz也很好用的 4. 很早之前就在语雀写过Wfuzz和ffuf的笔记 但是一直没有公开 ...
- MySQL-20-MySQL优化
MySQL优化哲学 1 为什么优化? 为了获得成就感? 为了证实比系统设计者更懂数据库? 为了从优化成果来证实优化者更有价值? 但通常事实证实的结果往往会和你期待相反!优化有风险,涉足需谨慎! 2 优 ...
- 手把手和你一起实现一个Web框架实战——EzWeb框架(三)[Go语言笔记]Go项目实战
手把手和你一起实现一个Web框架实战--EzWeb框架(三)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 本篇代码,请选择demo3 这一篇文章 ...