用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"> ...

随机推荐

【Qt】qt库结构及示例
QT库结构 Qt图形库是一个组织严谨的C++类库,其结构如图所示细说Qt库 Qt类库中包含了上百个类,结构十分复杂,上图展示了Qt_3.2类库的基本结构. Qt类库中的类可以分成两种类型: 一种是直 ...
CSS动画实现菜单栏从左边滑出
盗用一下图片吧:实际效果图如下: 1,有一个nav的侧边栏,有一个遮罩层,随着侧边栏打开,然后点击遮罩层关闭侧边栏关键代码: 1.给slideNav(侧边栏设置如下属性) .slideNav { p ...
H3C交换机SNMP配置
1.启动/关闭SNMP Agent服务在系统视图模式下: 启用:snmp-agent 关闭:undo snmp-agent 注:缺省情况下snmp agent是关闭的 2. 使能或禁止SNMP相应版 ...
shell数组应用
引言在Linux平台上工作,我们经常需要使用shell来编写一些有用.有意义的脚本程序.有时,会经常使用shell数组.那么,shell中的数组是怎么表现的呢,又是怎么定义的呢?接下来逐一的进行讲解 ...
pual_bot 天气插件编写
最近在玩pual_bot,感觉很不错,最近天气插件失效了,就结合百度api重新写了一个,也提交了. https://github.com/coldnight/pual_bot #!/usr/bin/e ...
[转]关于oracle with as用法
原文地址:https://www.cnblogs.com/linjiqin/archive/2013/06/24/3152667.html with as语法–针对一个别名with tmp as (s ...
【Unity Shader】六、使用法线贴图（Normal Map）的Shader
学习资料: http://www.sikiedu.com/course/37/task/456/show# http://www.sikiedu.com/course/37/task/458/show ...
flume1.8实现hdfsSink整点滚动文件
由于官方的1.8版本hdfs-sink不能在每天的0点滚动文件,所以修改了flume-hdfs-sink源码. flume-hdfs-sink中修改了HDFSEventSink.java文件,其他文件 ...
c# 文字首字母
public string GetFirstLetter(string hz) { string ls_second_eng = "CJWGNSPGCGNESYPBTYYZDXYKYGTDJ ...
《开发专家 Visual C 开发入行真功夫》笔记
智能感知的功能,输入 is 后,同时按下Alt + →这两个键就出现了供选择变量.方法.宏等的列表,继续输入 in 后,isInit就出来了. stdafx.h预编译头文件,.h应用程序主头文件,do ...

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

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

随机推荐

热门专题