<!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表格的无缝循环的更多相关文章

  1. table表格数据无缝循环滚动

    分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox">              ...

  2. Vue之循环遍历Json数据，填充Table表格

    简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...

  3. jquery 生成table表格 部分代码

    想生成上面这样的table表格先看返回数据格式 <div id="create_img_tab"></div> window.onload = functi ...

  4. ABAP 表格控制(Table Control)和步循环

    表格控制(Table Control)和步循环     1.两个标准Demo: SAPMTZ60,SAPMTZ61 2.简介 3.建立Table Control程序的基本流程 4.使用步循环 5.表格 ...

  5. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  6. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  7. 设计table表格，用js设计偶数行和奇数行显示不同的颜色

    第一种:鼠标经过时table表格中的颜色根据奇偶行改变不同的颜色 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  8. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  9. bootstrap table表格属性、列属性、事件、方法

    留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...

随机推荐

  1. 3dmax 欢迎页卡住

    C:\Program Files (x86)\Autodesk\3ds Max 9\stdplugs\dxplugins\dxDDS.mbi,把dxDDS.mbi重命名就OK了,只不过会提示他加载错误 ...

  2. python-pandas-1

    series Series 是pandas两大数据结构中(DataFrame,Series)的一种. 创建Series Series的定义:Series是一种类似于一维数组的对象,它由一组数据(各种N ...

  3. Android学习_服务

    一.           服务1.         Android多线程 每一个Android应用程序都会分别运行在一个独立的Dalvik(或ART?)虚拟机中,而每个虚拟机在启动时会运行一个UI主线 ...

  4. 微信公众号实现无限制推送模板消息！可向指定openID群发

    微信认证的服务号才有推送模板消息接口所以本文需要在认证服务号的情况下学习 以上就是模板消息,只有文字和跳转链接,没有封面图.在服务号的后台添加功能插件-模板消息即可. 模板消息,都是在后台选择一个群发 ...

  5. jstack+jdb命令查看线程及死锁堆栈信息

    如果程序挂死,有时使用jstack查看进程中线程信息时,需要添加上-F参数,此时如果有死锁信息,则可能不会打印出死锁堆栈信息,使用jdb则可以查看当前死锁线程的运行堆栈. 如下模拟一个简单的死锁程序 ...

  6. Ceph 客户端的 RPM 包升级问题

    问题 最近想把一个现有的 Ceph 客户端升级为最新的 M 版: [root@overcloud-ovscompute-0 ~]# rpm -qa | grep ceph puppet-ceph-2. ...

  7. 阶段3 3.SpringMVC·_05.文件上传_4 文件上传之Springmvc方式上传代码

    后台提供新的方法,上传的方法复制一份传统上传的代码.改名为fileupload2 配置解析器 名字必须叫做myltipartResolver 里面可以配置一些属性,例如上传文件的大小等. 文件大小 最 ...

  8. Mysqlfunc.c

    int rc;int db_connection;char *server = "192.168.139.207"; // 数据库的ip地址char *user = "c ...

  9. dbgrid中移动焦点到指定的行和列

    dbgrid是从TCustomGrid继承下来的,它有col与row属性,只不过是protected的,不能直接访问,要处理一下,可以这样:TDrawGrid(dbgrid1).row:=row;TD ...

  10. Element Children

    The childNodes property contains all of the immediate children of the element. There is a significan ...