`

一个让HTML表格实现自动滚动脚本

 
阅读更多
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://145.24.16.133:8080/monitor/charts/jquery.min.js"></script>
<script type="text/javascript">
$.fn.infiniteScrollUp=function(){
  var self=this,kids=self.children()
  kids.slice(20).hide();
  setInterval(function(){
    kids.filter(':hidden').eq(0).fadeIn();
    kids.eq(0).fadeOut(function(){
      $(this).appendTo(self)
      kids=self.children();
    });
  },1000);
  return this
}
$(function(){
  $('tbody').infiniteScrollUp();
})
</script>
<title>infiniteScrollUp</title>
</head>

<body>
<table border="1" width="400">
  <colgroup><col /><col /><col /><col /><col /><col /></colgroup>
  <thead>
    <tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th></tr>
  </thead>
  <tbody>
    <tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1e</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1f</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1g</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1h</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1i</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1j</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1k</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1l</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1m</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1n</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1o</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1p</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1q</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1r</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1s</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1t</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1u</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1v</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1w</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1x</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1y</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1z</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
  </tbody>
</table>
</body>
</html>

 

分享到:
评论

相关推荐

    400个DreamWeaver插件

    mxp/在代码编辑环境下,插入一个脚本函数,函数名和参数都可以自定义的 mxp/这个插件很有意思,让你的窗口从大变小,或者从小变大 mxp/用来更新Configuration-TagAttributeList.txt这个文件 mxp/插入中文空格 mxp/...

    55种网页小技巧 ---- 下载无需扣分,具有一定收藏价值

    ENTER键可以让光标移到下一个输入框.html IE地址栏前换成自己的图标 .html TEXTAREA自适应文字行数的多少.html title显示日期.html 不准粘贴.html 不能为空和邮件地址的约束.html 不要滚动条.html 光标是停...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中...

    程序天下:JavaScript实例自学手册

    3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中...

    猛犸代码助手 V3.0 最新版

    5、改进导出SQL脚本功能,导出SQL脚本是可选择导出创建表之间关系的SQL脚本,可选择将同类脚本导出到一个文件了。 6、改进Word数据字典导出功能。 6.1、导出Word数据字典时将导出外键描述标志。 6.2、自动生成表名...

    从入门到精通HTML5——PDF——网盘链接

     1.4 编写第一个HTML文件 8  1.4.1 HTML文件的编写方法 8  1.4.2 手工编写页面 9  1.4.3 使用可视化软件制作页面 10  1.4.4 使用浏览器浏览HTML文件 14  1.4.5 使用HTML开发的明日图书网 14  1.5 小结 15  ...

    JavaScript王者归来part.1 总数2

     13.5.1 事件处理模式--一个实现简单事件处理模式的例子   13.5.2 用户事件接口的定义   13.5.3 事件代理和事件注册--一个实现标准事件接口的例子   13.5.4 标准模式--事件分派和接收   13.6 一个例子--...

    JAVA上百实例源码以及开源项目源代码

     用JAVA开发的一个小型的目录监视系统,系统会每5秒自动扫描一次需要监视的目录,可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历,...

    JAVA上百实例源码以及开源项目

     用JAVA开发的一个小型的目录监视系统,系统会每5秒自动扫描一次需要监视的目录,可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历,...

    JavaScript网页特效范例宝典源码

    实例014 页面自动滚动 26 实例015 打开窗口特殊效果 27 实例016 动态显示窗口 29 实例017 慢慢放大的窗口 30 实例018 下降式浏览器 32 实例019 旋转的窗口 33 实例020 移动的窗口 34 实例021 震动的窗口 35 实例022 ...

    asp.net知识库

    从SQL中的一个表中导出HTML文件表格 获取數据库表的前N条记录 几段SQL Server语句和存储过程 生成表中的数据的脚本 最详细的SQL注入相关的命令整理 Oracle Oracle中PL/SQL单行函数和组函数详解 mssql+oracle Oracle...

    CMS 网站管理系统 源码

    循环弹出窗口:页面打开时同时弹出一个窗口,在同一窗口内循环显示广告位中的正常广告,这样,每刷新一次就会在弹出窗口中更替显示一个新的广告条 广告文件支持: 图片、动画、纯文本、嵌入代码、植入网页 只需后台...

    Colorinator在线颜色编辑器源码.rar

    关于本应用-Colorinator 本应用是一个学习使用 jQuery 和 KnockoutJS 的实例。可以自动根据红色、绿色及蓝色值来计算、调整颜色,同时,应用中也使用了 Wijmo jQuery 的滚动条和文本框插件。 也可以收藏本页,...

    Java核心技术II(第8版)

    11.1.6 一个示例:用脚本处理GUI事件 11.2 编译器API 11.2.1 编译便捷之法 11.2.2 使用编译工具 11.2.3 一个示例:动态Java代码生成 11.3 使用注解 11.3.1 一个示例:注解事件处理器 11.4 注解语法 11.5 标准注解 ...

    java源码包---java 源码 大量 实例

     用JAVA开发的一个小型的目录监视系统,系统会每5秒自动扫描一次需要监视的目录,可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历,...

    Art2008 CMS 网站管理系统 v3.1.rar

    循环弹出窗口:页面打开时同时弹出一个窗口,在同一窗口内循环显示广告位中的正常广告,这样,每刷新一次就会在弹出窗口中更替显示一个新的广告条 广告文件支持: 图片、动画、纯文本、嵌入代码、植入网页 只需...

    java源码包2

     用JAVA开发的一个小型的目录监视系统,系统会每5秒自动扫描一次需要监视的目录,可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历...

    java源码包3

     用JAVA开发的一个小型的目录监视系统,系统会每5秒自动扫描一次需要监视的目录,可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历...

Global site tag (gtag.js) - Google Analytics