table表格的无缝循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tablescroll</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style>
.tableheader{width: 800px;border:1px solid red;margin:0 auto;}
.tablebox{height: 200px;width: 800px;position: relative;border:1px solid red;margin:0 auto;overflow: hidden;}
.table{position: absolute;top:0;left:0;} </style>
</head>
<body>
<div class="tableheader">
<table>
<thead>
<tr><th width="50" align="center">编号</th><th width="140" align="center">案件编号</th><th width="150" align="center">案件名称</th><th width="80" align="center">案件状态</th><th width="80" align="center">区域</th></tr>
</thead>
</table>
</div>
<div class="tablebox">
<table class="table" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr><td width="50" align="center">001</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr>
<tr><td width="50" align="center">002</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr>
<tr><td width="50" align="center">003</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr>
<tr><td width="50" align="center">004</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr>
<tr><td width="50" align="center">005</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr>
<tr><td width="50" align="center">006</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr>
<tr><td width="50" align="center">007</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr>
<tr><td width="50" align="center">008</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr>
<tr><td width="50" align="center">009</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr>
<tr><td width="50" align="center">010</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr>
<tr><td width="50" align="center">011</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr>
<tr><td width="50" align="center">012</td><td width="140" align="center">PZA1068293794</td><td width="150" align="center">钟山区扫黑除恶77</td><td width="80" align="center">侦查阶段</td><td width="80" align="center">钟山区</td></tr> </tbody>
</table> </div>
</body>
</html>
<script>
var tblTop = 0;
var speedhq = 50; // 数值越大越慢
var outerHeight = $('.table tbody').find("tr").outerHeight();
var length = $('.table tbody tr').length;
console.log(length);
$('.table tbody').html($('.table tbody').html()+$('.table tbody').html());//循环不间断
MyMarhq = setInterval(Marqueehq,speedhq);
// 鼠标移上去取消事件
$(".table tbody").hover(function (){
clearInterval(MyMarhq);
},function (){
clearInterval(MyMarhq);
MyMarhq = setInterval(Marqueehq,speedhq);
})
function Marqueehq(){
if(tblTop <= -outerHeight*length){
tblTop = 0;
} else {
tblTop -= 1;
}
$('.table').css('top', tblTop+'px');
}
</script>
运行结果如图所未：
table表格的无缝循环的更多相关文章
- table表格数据无缝循环滚动
分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox"> ...
- Vue之循环遍历Json数据，填充Table表格
简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...
- jquery 生成table表格 部分代码
想生成上面这样的table表格先看返回数据格式 <div id="create_img_tab"></div> window.onload = functi ...
- ABAP 表格控制(Table Control)和步循环
表格控制(Table Control)和步循环 1.两个标准Demo: SAPMTZ60,SAPMTZ61 2.简介 3.建立Table Control程序的基本流程 4.使用步循环 5.表格 ...
- table 表格隔行换色实现
table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- 设计table表格，用js设计偶数行和奇数行显示不同的颜色
第一种:鼠标经过时table表格中的颜色根据奇偶行改变不同的颜色 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- bootstrap table表格属性、列属性、事件、方法
留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...
随机推荐
- ACM之路（19）—— 主席树初探
长春赛的 I 题是主席树,现在稍微的学了一点主席树,也就算入了个门吧= = 简单的来说主席树就是每个节点上面都是一棵线段树,但是这么多线段树会MLE吧?其实我们解决的办法就是有重复的节点给他利用起来, ...
- 「CF803C」 Maximal GCD
题目链接 戳我 \(Solution\) 令\(gcd\)为\(x\),那么我们将整个序列\(/x\),则序列的和就变成了\(\frac{n}{x}\),所以\(x\)必定为\(n\)的约数所以现在就 ...
- Nginx常见配置
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 2018-2019-2 20165205 网络对抗技术 Exp7 网络欺诈防范
2018-2019-2 20165205 网络对抗技术 Exp7 网络欺诈防范 实验内容 本次实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有 (1)简单应用SET ...
- Java-UncaughtExceptionHandler 捕获线程异常
实现 UncaughtExceptionHandler 类,重写 uncaughtException 方法. public class MyUncaughtExceptionHandler imple ...
- spring boot知识清单
https://mp.weixin.qq.com/s/q8OI2Ou8-gYP-usjToBbkQ
- MySQL获取距离
BEGIN ) ), ) ) ) ) ),))),); END
- 六十八：flask上下文之app上下文和request上下文
app上下文: 先看现象 current_app源码 手动入栈 app_context()源码 with语句入栈 request上下文 不在app上下文中 即使手动入栈也会报错,不在请求上下文中 ur ...
- POJ 1182-食物链 [并查集] 《挑战程序设计竞赛》2.4
Description 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到 ...
- python安装二进制k8s 1.11.0 一个master、一个node 查看node节点是主机名---apiserver无法启动，后来改了脚本应该可以
一.脚本说明: 本实验中master.node.etcd都是单体. 安装顺序为:先安装test1节点主要组件,然后开始安装test2节点,最后回头把test1节点加入集群中,这样做目的是理解以后扩容都 ...