<table>
<tr>
<td> <div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <table width=500 >
<tr>
<td> <a href="#">早在年初本人就开始构思建立个人主页</a>
</td>
</tr>
<tr>
<td>
<a href="#">到今天为止,本站共上传了近200个页面。(9.1)</a>
</td>
</tr>
<tr>
<td>
<a href="#">FLASH选修课案例完工,DW选修课案例可望在10、1前搞定。(9、9) </a>
</td>
</tr>
</table> </div>
</td>
</tr>
</table> <!-- 以下是javascript代码 -->
<script language="javascript">
<!--
marqueesHeight=80; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
//把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",20);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>

Table上下滚动的更多相关文章

  1. Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行

    今天我们来介绍一下 Bootstrap Blazor 中 Table 组件的虚拟滚动行,什么是虚拟滚动呢,我查到的解释是:只渲染可视区域的列表项,非可见区域的 完全不渲染,在滚动条滚动时动态更新列表项 ...

  2. ul 仿 table 循环滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. react中使用antd Table组件滚动加载数据的实现

    废话不多说,直接上代码.一目了然. import React, { Component } from "react"; import { Table } from "an ...

  4. IOS-tableView中的cellHeadView随着table滚动

    IOS-tableView中的cellHeadView随着table滚动 设置table的style 首先要将table设置为UITableViewStyleGrouped类型.这样就会得到table ...

  5. vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...

  6. dede图片横向滚动

    <div id=demo style="overflow:hidden; width:960px;" > <table border=0 align=" ...

  7. tableView优化性能

    在iOS应用中,UITableView应该是使用率最高的视图之一了.iPod.时钟.日历.备忘录.Mail.天气.照片.电话.短信. Safari.App Store.iTunes.Game Cent ...

  8. uitableview性能优化(转)

    这个感觉写的很好 收藏一下 以备后用 转自 http://www.cnblogs.com/pengyingh/articles/2354714.html 在iOS应用中,UITableView应该是使 ...

  9. iOS-性能优化3

    iOS-性能优化3 UITableView性能优化与卡顿问题 1.最常用的就是cell的重用, 注册重用标识符 如果不重用cell时,每当一个cell显示到屏幕上时,就会重新创建一个新的cell 如果 ...

随机推荐

  1. 【图像处理】Haar Adaboost 检测自定义目标(视频车辆检测算法代码)

    阅读须知 本博客涉及到的资源: 正样本:http://download.csdn.net/detail/zhuangxiaobin/7326197 负样本:http://download.csdn.n ...

  2. TiXmlHandle的使用-简化tinyxml的代码

    借鉴于:http://www.cppblog.com/elva/archive/2008/04/24/47907.html 例如: <?xml version="1.0" s ...

  3. SPOJ - HIGH :Highways (生成树计数)

    Highways 题目链接:https://vjudge.net/problem/SPOJ-HIGH Description: In some countries building highways ...

  4. Friendship POJ - 1815 基本建图

    In modern society, each person has his own friends. Since all the people are very busy, they communi ...

  5. bzoj 1520 [POI2006]Szk-Schools 费用流

    [POI2006]Szk-Schools Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 743  Solved: 381[Submit][Status][ ...

  6. javascript常用实例的实现与封装

    地址:https://github.com/chenhuiYj/ec-do 2.字符串操作 2-1去除字符串空格 //去除空格  type 1-所有空格  2-前后空格  3-前空格 4-后空格 fu ...

  7. Redrain 通用菜单控件使用方法和说明(附源码和demo)

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42889709 大概半年前我写过博客说明怎么改造duilib的原代Menu ...

  8. 快速排序Quick sort

    快速排序Quick sort 原理,通过一趟扫描将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归 ...

  9. 洛谷P2868 [USACO07DEC]观光奶牛 Sightseeing Cows

    题目描述 Farmer John has decided to reward his cows for their hard work by taking them on a tour of the ...

  10. 2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛 H. Skiing (拓扑排序+假dp)

    题目链接:https://nanti.jisuanke.com/t/16957 题目: In this winter holiday, Bob has a plan for skiing at the ...