Table上下滚动
<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上下滚动的更多相关文章
- Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行
今天我们来介绍一下 Bootstrap Blazor 中 Table 组件的虚拟滚动行,什么是虚拟滚动呢,我查到的解释是:只渲染可视区域的列表项,非可见区域的 完全不渲染,在滚动条滚动时动态更新列表项 ...
- ul 仿 table 循环滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- react中使用antd Table组件滚动加载数据的实现
废话不多说,直接上代码.一目了然. import React, { Component } from "react"; import { Table } from "an ...
- IOS-tableView中的cellHeadView随着table滚动
IOS-tableView中的cellHeadView随着table滚动 设置table的style 首先要将table设置为UITableViewStyleGrouped类型.这样就会得到table ...
- vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...
- dede图片横向滚动
<div id=demo style="overflow:hidden; width:960px;" > <table border=0 align=" ...
- tableView优化性能
在iOS应用中,UITableView应该是使用率最高的视图之一了.iPod.时钟.日历.备忘录.Mail.天气.照片.电话.短信. Safari.App Store.iTunes.Game Cent ...
- uitableview性能优化(转)
这个感觉写的很好 收藏一下 以备后用 转自 http://www.cnblogs.com/pengyingh/articles/2354714.html 在iOS应用中,UITableView应该是使 ...
- iOS-性能优化3
iOS-性能优化3 UITableView性能优化与卡顿问题 1.最常用的就是cell的重用, 注册重用标识符 如果不重用cell时,每当一个cell显示到屏幕上时,就会重新创建一个新的cell 如果 ...
随机推荐
- 如何给apk文件签名
1.签名的意义 为了保证每个应用程序开发商合法ID,防止部分开放商可能通过使用相同的Package Name来混淆替换已经安装的程序,我们需要对我们发布的APK文件进行唯一签名,保证我们每次发布的版本 ...
- HDU4081:Qin Shi Huang's National Road System (任意两点间的最小瓶颈路)
Qin Shi Huang's National Road System Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/3 ...
- php 获取周几
date("l"); //date就可以获取英文的星期比如Sunday date("w"); //这个可以获取数字星期比如123,注意0是星期日 获取中文星期几 ...
- phpstorm 安装
16 sudo apt-get install python-software-properties 17 sudo add-apt-repository ppa:webupd8team/java 1 ...
- Base class does not contain a constructor that takes '0' argument
刚刚在写一段直播室网站中的一段程序遇,突然遇到一个错误,如下 'TVLLKBLL.BaseClass' does not contain a constructor that takes 0 argu ...
- 第01篇 为什么推荐使用String直接赋值
在四海学的时候,可能需要我们经过沉淀才会去想一些事情,有的时候不知道为什么这样或者那样的时候,从今天看是,胖先生打算给大家开辟一个课程,就是我的读书笔记. 首先我们来认识一下String字符串 一般对 ...
- 深入探索C++对象模型(二)
构造函数语义学(The Semantics of Constructors) Default Constructor的构造操作 对于class X,如果没有任何user-declared constr ...
- 获得WebApi用Post方法获得新增数据的信息
首先,要知道webApi的基本返回方式是HttpResponseMessage,post会在响应中返回添加的对象,以及添加对象的访问地址 如:在fiddler里测试的时候 然后,我们可以根据这一点在后 ...
- LightOJ 1093 - Ghajini 线段树
http://www.lightoj.com/volume_showproblem.php?problem=1093 题意:给定序列,问长度为d的区间最大值和最小值得差最大是多少. 思路:可以使用线段 ...
- bzoj 1452: [JSOI2009]Count ——二维树状数组
escription Input Output Sample Input Sample Output 1 2 HINT ———————————————————————————————————————— ...