<!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. HDU 5858 Hard problem ——（计算几何）

    其实这题最多是个小学奥数题- -,,看到别人博客各显神通,也有用微积分做的(我也试了一下,结果到最后不会积...). 思路如下(这两张图是网上找来的): 然后就很简单了,算三角形面积可以用海伦公式,也 ...

  2. DB 分库分表（5）：一种支持自由规划无须数据迁移和修改路由代码的 Sharding 扩容方案

    作为一种数据存储层面上的水平伸缩解决方案,数据库Sharding技术由来已久,很多海量数据系统在其发展演进的历程中都曾经历过分库分表的Sharding改造阶段.简单地说,Sharding就是将原来单一 ...

  3. shell编程-定时任务（备份数据库）

    计划任务定时备份,删除等操作: #crontab -e #注意 会区分用户 默认在root用户登录用的是root权限用户的计划任务, 如果想在postgres备份 应使用postgres用户权限, 设 ...

  4. LeetCode 238. 除自身以外数组的乘积（ Product of Array Except Self）

    题目描述 给定长度为 n 的整数数组 nums,其中 n > 1,返回输出数组 output ,其中 output[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积. 示例: 输 ...

  5. Python轻量级开发工具Genay使用

    Genay是一个轻量级的免费,开放源代码的开发工具,支持很多的文件类型,并且支持很多的插件,启动快速.安装包只有十几兆,相关的插件也不大,相比pycharm专业版需要收费,并且社区版的安装包大小有两百 ...

  6. 取得远端相应Json并转化为Java对象一

    JDK:1.8.0_212 IDE:STS4(Spring Tool Suit4 Version: 4.3.2.RELEASE) 工程下载:https://files.cnblogs.com/file ...

  7. Vue踩坑系列

    前言 前端开发对于vue的使用已经越来越多,它的优点就不做介绍了, 本篇是我对vue使用过程中遇到的问题中做的一些总结,帮助大家踩坑.如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家!!! ...

  8. 如何优雅的给TDatetimePicker控件赋值(Delphi)

    给DatetimePicker赋值时,可以通过界面设置赋值,也可以通过代码赋值. 通常,我们会给表示起始时间的dtp赋值为 00:00:00,给表示结束时间的dtp赋值为23:59:59. 代码如下: ...

  9. bazel编译im2txt的问题

    问题: 原本可以正常运行的程序,出现找不到tensorflow的问题.打印出来sys.version和sys.path,发现python版本并不是conda环境的版本 (tensorflow) yua ...

  10. CDH spark 命令行测试

    一. 参考 https://www.cnblogs.com/bovenson/p/5801536.html [root@node- test]# chown hdfs:hdfs /root/test/ ...