软件学堂

网游分类软件分类

JS代码实现滚动的表格

2012-10-31 来源:网络

【实例名称】

JS代码实现滚动的表格

【实例描述】

表格一般用来显示数据库中的信息,当数据库中内容过多时,可使用分页表格,也可以通过表格的滚动来显示数据。本例学习如何制作滚动的表格。

【实例代码】

 

<html> <head> <title>无标题文档-学无忧(www.xue51.com)</title> </head> <body> <script type="text/javascript">     marque(320,196,"icefable1","box1left")     var scrollElem;     var stopscroll;     var stoptime;     var preTop;     var leftElem;     var currentTop;     var marqueesHeight; //为表格添加事件 function marque(width,height,marqueName,marqueCName) {  try{    marqueesHeight = height;    stopscroll     = false;

   scrollElem = document.getElementById("mydiv");    with(scrollElem){   style.width     = width;   style.height    = marqueesHeight;   style.overflow  = 'hidden';   noWrap          = true;    }    scrollElem.onmouseover = new Function('stopscroll = true');    scrollElem.onmouseout  = new Function('stopscroll = false');    preTop     = 0;    currentTop = 0;    stoptime   = 0;    leftElem = document.getElementById("mydiv");    scrollElem.appendChild(leftElem.cloneNode(true));    init_srolltext();  }catch(e) {} } //表格滚动的初始化 function init_srolltext() {   scrollElem.scrollTop = 0;   setInterval('scrollUp()', 18); } //向上滚动的方法 function scrollUp() {   if(stopscroll) return;   currentTop += 1;   if(currentTop == marqueesHeight+1) {     stoptime += 1;     currentTop -= 1;     if(stoptime == (marqueesHeight)*1) {   //停顿时间       currentTop = 0;       stoptime = 0;     }   }else{     preTop = scrollElem.scrollTop;     scrollElem.scrollTop += 1;     if(preTop == scrollElem.scrollTop){       scrollElem.scrollTop = marqueesHeight;       scrollElem.scrollTop += 1;     }   } } </Script> </body> </html>

【运行效果】

运行效果

【难点剖析】

本例的重点是“scrollTop”属性。其在此例中表示表格的纵坐标位置,通过此值的递增来实现表格的滚动,图片和页面滚动同样是利用此属性。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:滚动的表格 进行本实例源码下载 

上一篇:用JavaScript隐藏或显示表格列
下一篇:JS代码实现交换表的行

相关文章