用js实现table内容从下到上连续滚动

网上有很多用ul实现新闻列表滚动的例子，但是很少有直接用table实现列表内容滚动的例子，而Marquee标签滚动的效果不是很好，于是就自己写了一个，提供给攻城师朋友们参考

实现思路：由于table包含标题和内容，实际上理想的效果是标题不动，内容滚动，于是把标题和内容拆分出来放在两个table中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>

<head>

<title>table内容连续滚动</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<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() {

	if (demo2.offsetTop - demo.scrollTop <= 0) {

		demo.scrollTop -= demo1.offsetHeight;

	} else {

		demo.scrollTop++;

	}

}

var MyMar = setInterval(Marquee, speed);

demo.onmouseover = function() {

	clearInterval(MyMar);

}

demo.onmouseout = function() {

	MyMar = setInterval(Marquee, speed);

}

</script>

</body>

</html>

没用使用插件，直接将代码另存为html文件，用浏览器打开测试即可

经过测试，IE8、Chrome、Firefox都可以兼容

用js实现table内容从下到上连续滚动的更多相关文章

手机端 : js设置table内容加载更多，并头部锁定悬浮
<script src="js/jquery.min.js" type="text/javascript"></script> < ...
JS 将Table内容导出到Excel(样式设计)
转载请注明来源:https://www.cnblogs.com/hookjc/ function saveAsExcel(tableID){ var tb = new TableToExcel(tab ...
html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
JS table内容转成二维数组，支持colspan和rowspan
思路:1.先初始化colspan的数据到数组2.根据rowspan和colspan计算th和td的矩阵二次填充数组说明:需要引用到第三方库jQuery,table中的th和td行和列跨度必须正确 & ...
js在table指定tr行上或底下添加tr行
js在table指定tr行上或下面添加tr行 function onAddTR(trIndex) { var tb = document.getElementB ...
js导出table中的EXCEL总结
导出EXCEL通常是用PHP做,可是项目中,有时候PHP后端project师返回的数据不是我们想要的,作为前端开发project师,把相应的数据编号转换为文字后,展示给用户.可是.需求要把数据同一时候 ...
第十三篇 JS 操作table表格
JS 操作table表格这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...
前端三件套 HTML+CSS+JS基础知识内容笔记
HTML基础目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签文本和超链接标签标题标签段落标签换行标签水平标签 ...
js对文章内容进行分页示例代码
这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下 Thinkphp中文章显示代码: 代码如下: <div id="showContent"> ...

随机推荐

深度 | 机器学习敲门砖：任何人都能看懂的TensorFlow介绍【转】
转自:http://oicwx.com/detail/1161517 选自 kdnuggets 作者:Soon Hin Khor 机器之心编译参与:Rick.吴攀.李亚洲本文是日本东京 Tenso ...
Mac下使用su命令提示sorry
Mac下使用su命令提示sorry,解决办法如下: ➜ Downloads su Password: su: Sorry 谷歌之,两个解决方式: sudo su - # 输入开始第一个创建用户的密码 ...
Docker Dockerfile 基本结构详解
dockerfike快速创建自定义的Docker镜像一.目录 1.docker典型结构 2.指令介绍 3.创建docker镜像二.结构 DockerFile分为四部分组成:基础镜像信.维护者信息. ...
RelativeLayout.LayoutParams
通过id设置相对兄弟元素对齐. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
mysql性能优化（二）
key_buffer_size 为了最小化磁盘的 I/O , MyISAM 存储引擎的表使用键高速缓存来缓存索引,这个键高速缓存的大小则通过 key-buffer-size 参数来设置.如果应用系统中 ...
IP段对应表
IP段对应表 IP总数子网掩码 C段个数 /30 4 255.255.255.252 1/64 /29 8 255.255.255.248 1/32 /28 16 255.255.255.240 ...
C#学习笔记（23）——C#将PPT批量转为JPG（aspose方法）
说明(2017-7-31 18:30:25): 1. 最主要的是下载到aspose的破解文件,我在这里下载的http://www.lenosoft.net/down/10205.htm,如果不差钱可以 ...
WPF 系列学习
WPF CheckBox 自定义样式给Button设置ToolTip 圆角Button 样式
Redis集群方案<转>
为什么集群? 通常,为了提高网站响应速度,总是把热点数据保存在内存中而不是直接从后端数据库中读取.Redis是一个很好的Cache工具.大型网站应用,热点数据量往往巨大,几十G上百G是很正常的事儿,在 ...
springcloud配置中心客户端配置遇到的坑
1. 出错信息如下: 在启动配置中心的客户端时,报以下错误信息: Caused by: java.lang.IllegalArgumentException: Could not resolve pl ...

用js实现table内容从下到上连续滚动

用js实现table内容从下到上连续滚动的更多相关文章

随机推荐

热门专题