用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"> ...
随机推荐
- 【C/C++】程序如何来，编译全过程
概述 编译的目的是把人书写的高级语言代码翻译成目标程序的语言处理程序,编译用的程序(例如gcc)称为编译系统. 一个编译系统把一个源程序翻译成目标程序的工作过程分为5个阶段:词法分析.语法分析. ...
- 使用MSYS、Notepad++搭建C/C++开发环境
目标说明 本文的目标是教会大家如何用Notepad++来编写C/C++代码,并能够编译运行. 注:Notepad++是一个非常优秀的开源文本编辑器.官网地址 http://notepad-plus-p ...
- RelativeLayout 相对父级元素布局
相对布局,用来设置相对父级视图的位置 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android ...
- iOS友盟推送测试模式添加手机设备报红解决如下
设备描述红色一般是没有往友盟发日志,或者appkey漏掉了.先检查是否正确的填写了推送的appkey,统计的方法为MobClick startWithAppkey:推送的方法为UMessage sta ...
- 在 Linux 下用 grep 时高亮显示匹配的部分
用 grep 匹配文件时,显示结果黑压压的一片执行一下这条命令,重新 grep 试试看export GREP_OPTIONS='--color=auto'好看多了,不是吗?你可以把 export GR ...
- [数据结构]最大流之Ford-Fulkerson算法
本文主要讲解最大流问题的Ford-Fulkerson解法.可以说这是一种方法,而不是算法,因为它包含具有不同运行时间的几种实现.该方法依赖于三种重要思想:残留网络,增广路径和割. 在介绍着三种概念之前 ...
- SpringBoot2 【关于：Table 'XXX.hibernate_sequence' doesn't exist】
将ID生成略组改成@GeneratedValue(strategy = GenerationType.IDENTITY).
- 如何在ROS中使用PCL—数据格式（1）
在ROS中点云的数据类型 在ROS中表示点云的数据结构有: sensor_msgs::PointCloud sensor_msgs::PointCloud2 pcl::PointCl ...
- CATALINA_BASE与CATALINA_HOME的区别
http://blog.csdn.net/keda8997110/article/details/21400455 —————————————————————————————————————————— ...
- jQuery验证控件jquery.validate.js的使用介绍
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...