『改进』逐行滚动文字效果的Javascript实现
来源:互联网 发布:c语言16进制转换为中文 编辑:程序博客网 时间:2024/05/18 09:20
/* 本程序根据21cn的一个版本改进而来。
* 原版本实现的思路是:在一个大小只有一行的层里生成一个表格,然后使用
* TABLE的scrollTop来实现逐行滚动。但这个方法只能在IE中正常运行,在Mozzila 就无法滚动。
* 改进后使用 IFrame 来代替原来的层,使用BODY的scrollTop来实现滚动。
* BTW:DannyKang 是我英文名写法。
*/
//FILE: scrolltext.js CREATED: DannyKang @ 2004-5-19
var stopscroll=false;
var preTop=0;
//var newTop=0;
var currentTop=0;
var stoptime=0;
var iInterval ;
function init_srolltext(){
document.body.scrollTop=0;
document.body.onmouseover = new Function("stopscroll=true");
document.body.onmouseout = new Function("stopscroll=false");
document.body.oncontextmenu = new Function("return false;");
document.body.onselectstart = new Function("return false;");
iInterval = setInterval("scrollUp()",25);
}
function scrollUp(){
if(stopscroll==true) return;
currentTop+=1; //每次滚动 1 个象素
if(currentTop==24){ //刚滚动完一行后(每行高23)
stoptime+=1; //停顿时间累计 1 个单位时间(25毫秒)
currentTop-=1; //滚动位移数恢复原值
if(stoptime==100){ //停顿时间累计 100 个单位时间后重新计算滚动位移和停顿时间
currentTop=0;
stoptime=0;
//if(confirm("One line end ...... /n/nok to stop , cancel to go on.")){clearInterval(iInterval);}
}
}else{
document.body.scrollTop = preTop +1; //滚动 1 个象素
if(preTop< document.body.scrollTop){
preTop = document.body.scrollTop ;
}
else {//如果滚动到末尾了(滚动跟没滚一样)
preTop = 1
document.body.scrollTop = 1;
//if(confirm("scroll to all text ending.......["+preTop+"/"+document.body.scrollTop+"] /n/nok to stop , cancel to go on.")){clearInterval(iInterval);}
}
}
}
init_srolltext(); //启动
/*调用页面的IFrame 写法*/
<iframe id="adtxt1" align="center" style="WIDTH: 590; HEIGHT: 23" src="index_js/adtxt1.htm" name="iframe1" frameborder="0" scrolling="no"></iframe>
/*滚动内容的HTML页面 adtxt1.htm 源代码*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>滚动新闻</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
body,TD {
FONT-SIZE: 9pt
}
</STYLE>
<BODY scroll=no leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border=0 align="center" cellpadding=0 cellspacing=0>
<tr>
<td height=23 align="center" nowrap><a href="http://photo.zsnet.com/tounament/" target="_blank">中山市“美好生活一瞬间”数码摄影比赛</a>
<a href="http://www.zsyjedu.net.cn/jianjie.htm" target="_blank"><font color="#FF0000">中国商业技师协会职业资格权威认证培训</font></a>
</td>
</tr>
<!--头条:与尾条相同内容-->
<tr>
<td height=23 align="center" nowrap><a href="http://wh3351.zsnet.com/news/news_view.asp?news_id=5670" target="_blank">“好山好水好儿女”中山文化名人推广月</a>
<a href="http://news.zsnet.com/newscontent.asp?newsid=77777" target="_blank">中山市劳动和社会保障工作情况通报</a></td>
</tr>
<!--tr>
<td height=23 align="center" nowrap> </td>
</tr-->
<!--尾条:与头条相同内容-->
<tr>
<td height=23 align="center" nowrap> <a href="http://photo.zsnet.com/tounament/" target="_blank">中山市“美好生活一瞬间”数码摄影比赛</a>
<a href="http://www.zsyjedu.net.cn/jianjie.htm" target="_blank"><font color="#FF0000">中国商业技师协会职业资格权威认证培训</font></a>
</td>
</tr>
</table>
<!-- 放在body内最后一行 -->
<SCRIPT language=JavaScript src="scrolltext.js"></SCRIPT>
</BODY>
</HTML>
/*调用页面演示效果见:http://www.zhongshan.gd.cn */
- 『改进』逐行滚动文字效果的Javascript实现
- 【JavaScript】类似maque滚动文字效果
- 模仿 LED 灯的滚动文字效果
- 自定义滚动文字效果
- 滚动的文字效果 就类似广告的LED
- H5实现中奖记录逐行滚动切换效果
- Javascript版旋转文字效果
- 逐行新闻滚动效果
- 逐行新闻滚动效果
- HTML+CSS实现图片下半部分遮罩文字效果(仿微信推送信息的图片文字效果)
- 逐行向上滚动 类似中奖名单的小例子
- javascript实现的可改变滚动方向的无缝滚动
- Javascript实现连续滚动的跑马灯,可上下左右滚动
- JavaScript实现图片的不间断连续滚动
- 横向滚动图片,javascript实现的例子
- JavaScript实现图片的不间断连续滚动
- 一个javascript实现的滚动条
- Javascript实现神奇的页面滚动控制
- [转贴]论调用约定
- 图像与文字的合成
- 这是一个注定要被记住的开始
- 开通blog,建立我的个人领地
- 学习笔记(1)--Crystal Enterprise组件
- 『改进』逐行滚动文字效果的Javascript实现
- 剖析Windows任务管理器开发原理与实现
- DbClick to delete record in DataGrid
- 探测Windows2K/XP/2003本机系统信息
- exp参数中的query参数
- maxlength就安全了吗?
- 一个愚蠢的想法
- Google也可"绑架"IE搜索栏
- 蓝筹与价值