table内容连续滚动

最新推荐文章于 2024-09-19 16:01:15 发布
最新推荐文章于 2024-09-19 16:01:15 发布
阅读量3.7k 收藏 2
点赞数
分类专栏： HTML 文章标签： table内容连续滚动 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>	</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {padding: 0; margin: 0};
td {height: 28px;};
</style>
</head>
<body bgcolor="#FFFFFF">
<div style="padding-top: 100px;">
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="4FBFF9">
	<tr>
		<td width="120" align="center">业务流水号</td>
		<td width="130" align="center">业务名称</td>
		<td width="150" align="center">申请企业名称</td>
		<td width="100" align="center">申报日期</td>
		<td width="100" align="center">办理状态</td>
	</tr>
</table>
</div>
<div id="demo" style="overflow: hidden; height: 240;">
	<div id="demo1">
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="4FBFF9">
			<tr>
				<td width="120" align="center">201404020001</td>
				<td width="130">测试业务</td>
				<td width="150">申请企业名称</td>
				<td width="100" align="center">2014-03-13</td>
				<td width="100" align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020002</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020003</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020004</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020005</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020006</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020007</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020008</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020009</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020010</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020011</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020012</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020013</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020014</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020015</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020016</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020017</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020018</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020019</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
			<tr>
				<td align="center">201404020020</td>
				<td>测试业务</td>
				<td>申请企业名称</td>
				<td align="center">2014-03-13</td>
				<td align="center">在办</td>
			</tr>
		</table>
	</div>
	<div id="demo2"></div>
</div>
<script type="text/javascript">
var speed = 50;
demo2.innerHTML = demo1.innerHTML;
function Marquee() {
	console.log("demo2.offsetTop"+demo2.offsetTop)
	if (demo.scrollTop>=(demo.offsetTop/3)) {
		demo.scrollTop=0;;
	} else {
		demo.scrollTop++;
	}
}
var MyMar = setInterval(Marquee, speed);
 
demo.onmouseover = function() {
	clearInterval(MyMar);
}
 
demo.onmouseout = function() {
	MyMar = setInterval(Marquee, speed);
}
</script>
</body>
</html>

备注：转载内容

如果 你使用的是
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1 Transitional//EN" >
则无法使用这种js 语法实现 将其 改成4.0 就可以了
实现表格动态滚动效果
05-04
通过CSS+Javascript实现类似表格的动态滚动效果，用ul和li标签模拟表格，文件包括实现源码。
jquery自下而上循环滚动table
12-14
jquery自下而上循环滚动table
HTML table 自动滑动方法
lfl18326162160的博客
09-19 236
【代码】HTML table 自动滑动方法。
一个table表头固定，内容可滚动的实用例子
10-20
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
table列表实现滚动,鼠标移入暂停滚动,鼠标移出继续滚动
m0_58575070的博客
01-09 734
今天领导要求table列表加自动滚动效果,苦思冥想,准备写一个指令;
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
徊忆羽菲
04-28 1791
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
layui 实现table翻页滚动条位置保持不变的例子
10-16
然而，在实际应用中，开发者可能会遇到一些小问题，比如在使用layui table进行数据分页时，滚动条的位置在翻页后会自动复位，这会破坏用户的浏览连续性，降低使用体验。为了解决这个问题，我们可以自定义一些...
jQuery实现列表自动滚动循环滚动展示新闻
10-25
1. HTML部分：首先需要一个div元素作为滚动容器，这个容器内部包含一个ul元素，ul元素中再包含多个li元素，每个li元素都包含一个a标签，用于展示新闻内容。在每个a标签中通过title属性增加鼠标悬停提示。 2. CSS...
符合web标准的连续滚动图像的js代码
10-31
### 符合Web标准的连续滚动图像的JS代码解析 #### 一、概述 随着互联网技术的发展，网页设计越来越注重用户体验与视觉效果。其中，连续滚动图像作为一种吸引用户注意力的有效手段，在很多网站中都有应用。本文将...
ElementUI table无缝循环滚动
最新发布
09-26
当用户滚动到底部时，表格不会突然消失，而是自动加载下一批数据并无缝衔接显示，给用户一种连续浏览的感觉。这通常是通过监听滚动事件（如 `scroll` 或 `wheel`），当滚动到指定位置时，向服务器请求新的数据，然后...
符合W3C Web标准的图片连续无间隙水平滚动
09-06
在Web开发中，实现符合W3C Web标准的图片连续无间隙水平滚动是一种常见的需求，主要用于创建动态、吸引人的展示区域，如轮播图或者广告栏。W3C Web标准是全球互联网行业的规范，遵循这些标准可以确保网页在各种...
table表格自动滚动
辞忧*的博客
03-11 6402
大屏展示表格数据，需要进行实时滚动的效果 当前没使用json数据渲染，如果渲染要把内容放在 id=“fTbody” 的表格中 <table> <tbody> <tr class="f16"> <th width="10%">时间</th> <th width="10%">品类</th> <th widt.
js实现table自动滚动
weixin_30445169的博客
07-15 3642
<div style="height:400px" :class="{anim:animate==true}" @mouseenter="mouseenter" @mouseleave="mouseleave"> <el-table :data="tableData" border style="width: 100%;margin-top: 15px;height:38...
用js实现table内容从下到上连续滚动
Programmer.Wenlong 小龙在线
04-03 982
网上有很多用ul实现新闻列表滚动的例子，但是很少有直接用table实现列表内容滚动的例子，而Marquee标签滚动的效果不是很好，于是就自己写了一个，提供给攻城师朋友们参考 实现思路：由于table包含标题和内容，实际上理想的效果是标题不动，内容滚动，于是把标题和内容拆分出来放在两个table中 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 T...
react+antd+table实现表格数据在当前页从头到尾循环滚动展示
weixin_45481456的博客
06-27 1969
不带分页的表格滚动
antd Table 自适应滚动
JudyC的博客
08-11 5165
antd Table 自适应滚动 问题： antd的Table想要表头固定内容部分滚动的话必须给scroll设置固定值 如： <Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} /> 需清楚地指明300or calc(100vh - 30px)，而我需要Table高度自适应父div的高度 即父元素div的高度初始化时是不定的，Table超出该div的高度时，内部自动发生滚动 解决： const [scr
table 列表自动滚动显示代码
HYHOLINE的专栏
05-26 5769
滚动信息 - 51windows.net body{font-size:12px;background-color:#FFF;overflow:hidden;} td{font-size:12px;} .titletd td{background-color:#EFEFEF;padding:2px;text-align:center;} .datatd td{backg
vue 原生table表格 实现无限滚动效果（vueSeamlessScroll使用）
SM_Cute的博客
03-12 1232
vue 原生table表格 实现无限滚动效果（vueSeamlessScroll使用）
table表头固定表体滚动（动态出内部滚动条）
想搞全栈的前端
02-09 1043
效果如图 代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <script src="jquery.min.js"></s
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值