<!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. 实验四《Android程序设计》实验报告封面

    实验四<Android程序设计>实验报告封面 课程:Java程序设计 班级:1753班 姓名:许钰玮 学号:20175329 指导教师:娄嘉鹏 实验日期:2019年5月13日 实验时间:1 ...

  2. idea启动报Plugin Error错误的解决办法(亲测有效)

    今天在idea工作时,idea崩溃自动关闭,再打开时报Plugin Error,tomcat无法启动,于是上网查询,看到这个办法,成功解决了我的问题: 找到IDEA的配置文件夹下的disabled_p ...

  3. Numpy数据类型转化astype，dtype

    1. 查看数据类型 import numpy as np arr = np.array([1,2,3,4,5]) print(arr) [1 2 3 4 5] # dtype用来查看数据类型 arr. ...

  4. (转)js控制窗口失去焦点（包括屏蔽Alt+Tab键切换页面）

    本章内容转自:http://www.cnblogs.com/BoKeYuanVinson/articles/3360954.html 转载自网络贴吧: 页面脚本是无法截获alt键的,不过可以变通一下, ...

  5. JMeter 中的如何区分 Server Time 和 Network Time

    在 LR 中是有一个“网页细分图”的,通过这个图,你可以比较容易的区分哪些请求的响应时间最长,如果响应时间过程,是消耗在server处理的时候,还是消耗在网络传输过程中——也就是所谓的 Server ...

  6. 安装Redis-cluster-gem install redis报错的解决方案

    错误描述: [root@eshop-cache01 local]# gem install redis ERROR: Loading command: install (LoadError) cann ...

  7. delete file SVN commit error has no URL

    在提交SVN的时候遇到这个提交失败的提示: delete file SVN commit error has no URL 我的提交顺序是: 先在自己工程的文件夹删除 ->工程中删除 -> ...

  8. C语言基础：内置函数的调用

    #include<stdio.h>#include<math.h>#include<stdlib.h>#include<ctype.h>#include ...

  9. Object.assign()的用法 -- 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，返回目标对象

    语法: Object.assign(target, …sources) target: 目标对象,sources: 源对象用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. ...

  10. linux上wps2019不能启动解决方法

    本人linux上的wps2016升级成wps2019后启动不了,双击图标没反应,在命令行输入wps,提示"/lib64/libc.so.6: version `GLIBC_2.18' not ...