分享
 
 
 

『改进』逐行滚动文字效果的Javascript实现

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

/* 本程序根据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 */

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有