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 ...
随机推荐
- 支持快应用的http网络库-flyio
Fly.js 一个基于Promise的.强大的.支持多种JavaScript运行时的http请求库. 有了它,您可以使用一份http请求代码在浏览器.微信小程序.Weex.Node.React Nat ...
- angularJS <input type="file> 图片的base64编码
talk is cheap show me the code <input type="file" id="file" name="file&q ...
- linux 上修改了nginx.conf 怎么重新加载配置文件生效
步骤如下先利用/usr/local/nginx/sbin/nginx -t测试配置文件修改是否正常/usr/local/nginx/sbin/nginx -s reload重新加载 nginx 更改配 ...
- 【Spring】mvc:annotation-driven 使用
关注此标签,是在项目中有使用 <!-- 解决@ResponseBody 的实现类其默认的编码是 iso-8859-1的问题 --> <mvc:annotation-driven> ...
- ANTLR4将JSON翻译成XML
实现功能:构建一个JSON到XML的翻译器. antlr4文件: grammar JSON; json : object | array ; object : '{' pair (',' pair)* ...
- Note 1 for <Pratical Programming : An Introduction to Computer Science Using Python 3>
Book Imformation : <Pratical Programming : An Introduction to Computer Science Using Python 3> ...
- Nginx配置文件详细说明 （转）
Nginx配置文件详细说明 原文链接:http://www.cnblogs.com/Joans/p/4386556.html 在此记录下Nginx服务器nginx.conf的配置文件说明, 部分注释收 ...
- [转]html中meta作用
meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <head> <meta http-equiv="cont ...
- Selenium 2自动化测试实战22（处理HTML5的视频播放）
一.处理HTML5的视频播放 大多数浏览器使用控件(如Flash)来播放视频,但是,不同的浏览器需要使用不同的插件.HTML5定义了一个新的元素<video>,指定了一个标准的方式来嵌入电 ...
- mybatisplus EntityWrapper 常用方法
1. #WHERE (issue_type = ?) AND (status = ? OR status = ? OR status = ?) EntityWrapper wrapper=new En ...