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 如果 ...
随机推荐
- JS传递中文参数出现乱码的解决办法
一.window.open() 乱码: JS中使用window.open("url?param="+paramvalue)传递参数出现乱码,提交的时候,客户端浏览器URL中显示参数 ...
- BAT大数据面试题
1.kafka的message包括哪些信息 一个Kafka的Message由一个固定长度的header和一个变长的消息体body组成 header部分由一个字节的magic(文件格式)和四个字节的CR ...
- 如何让浏览器在访问链接时不要带上referer
function open_without_referrer(link){ document.body.appendChild(document.createElement('iframe')).sr ...
- linux内网机器如何查看本地外网ip
参考自:http://www.gaojinbo.com/linux%E5%86%85%E7%BD%91ip%E7%9A%84%E6%9C%BA%E5%99%A8%E5%A6%82%E4%BD%95%E ...
- C++11新特性,对象移动,右值引用,移动构造函数
C++11新标准中的一个最主要的特性就是移动而非拷贝对象的能力.接下来简要介绍一下相关概念. 右值引用 所谓右值引用就是必须绑定到右值的引用.通过 && 而不是 & 来获得右值 ...
- spring事务的一些注意点
参考文章 http://blog.csdn.net/qq_34021712/article/details/75949779 ©王赛超 1.在需要事务管理的地方加@Transactional 注解 ...
- python基础---输入输出
1.输入字符串. name=input() or name=input('please input a string') 这样可以接收一个字符串,包括空格,都可以输入.只有回车不接受,作为结束符, ...
- Codeforces 321E Ciel and Gondolas
传送门:http://codeforces.com/problemset/problem/321/E [题解] 首先有一个$O(n^2k)$的dp. # include <stdio.h> ...
- Spring boot 集成Dubbox(山东数漫江湖)
前言 因为工作原因,需要在项目中集成dubbo,所以去查询dubbo相关文档,发现dubbo目前已经不更新了,所以把目光投向了dubbox,dubbox是当当网基于dubbo二次开发的一个项目,dub ...
- 暑假集训——cf热身赛部分题有感加其题解
刚刚开始集训,集训队队长暂时还没有拉专题,而是拉了部分codeforces上过题人数在2000左右的题组成了一场热身赛(其实就是一场练习),花了一天时间终于把它刷完了,其中很多题让我学到了很多骚操作, ...