从网页尾部滚动向上、弹簧卷轴的文字特效

发布时间：2018-08-20 13:47:13 所属栏目：PHP教程来源：站长网

导读：从网页尾部滚动向上、收缩显示的文字特效。就像弹簧卷轴一样的文字显示特效，纯 Java Script代码实现，无 jQuery ，因主要想体现功能，因此在美化方面做的不多，有需要的朋友，你可以自己美化一下，效果简单。演示代码： htmlheadmeta http-equiv=Content

　　从网页尾部滚动向上、收缩显示的文字特效。就像弹簧卷轴一样的文字显示特效，纯JavaScript代码实现，无jQuery，因主要想体现功能，因此在美化方面做的不多，有需要的朋友，你可以自己美化一下，效果简单。

　　演示代码：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>弹簧卷轴</title> </head> <body bgcolor="#fef4d9" onload=initiate()> <SCRIPT language=JavaScript1.2> var message= new Array() message[0]="站长疯狂的时代已经远去...... 搜索引擎将决定你的未来，曾经很牛的站长，现在何处，中国互联网就走向何方，恐矣，恐矣……" message[1]="最近几点感受：1、话多的创业者，往往都是种了别人的田荒了自己的地。整天给别人指点，最终就荒废了自己的那一亩三分地；2、坚持下来，每年都能有2-3次天上掉馅饼的好事；3、可以长得很丑，但是，不能长的没有中心思想，或者，不能没有重点；4、骂你或提建议，一定要感谢感恩！假话易得，真话难寻。！" var scrollerwidth=300 var scrollertop=10 var scrollerleft=10 var targetlink="_blank" var font_face="宋体" var font_color="006600" var font_size=15 var standstill=3000 var lineheightmax=12 var lineheight=lineheightmax var linestep=0.2 var i_message=0 var mes_joined var mes_split var contenttext var pause=20 function initiate() { if (document.all) { document.all.scrollertext.style.posTop=scrollertop document.all.scrollertext.style.posLeft=scrollerleft document.all.scrollertext.style.width=scrollerwidth lineup() } if (document.layers) { alert("This script works with Internet Explorer 4x or higher. Sorry Netscape-Folks!") } } function lineup(){ mes_joined=message[i_message] mes_split=mes_joined.split("|") contenttext="<span style='position:relative;font-family:"+font_face+"; color:"+font_color+";font-size:"+font_size+"pt;line-height:"+lineheight+";width:"+scrollerwidth+"px'>" contenttext+=mes_split[0] contenttext+="</span>" if (lineheight>1.2) { scrollertext.innerHTML=contenttext var timer=setTimeout("lineup()",pause) lineheight-=linestep } else { mes_joined=message[i_message] mes_split=mes_joined.split("|") contenttext="<span style='position:relative;font-family:"+font_face+"; color:"+font_color+";font-size:"+font_size+"pt;line-height:"+lineheight+";width:"+scrollerwidth+"px'>" contenttext+=mes_split[0] contenttext+="<br><a href='http://www.liehuo.org'>更多 ...</a>"//"+mes_split[1]+"' target='"+targetlink+" contenttext+="</span>" scrollertext.innerHTML=contenttext clearTimeout(timer) var timer=setTimeout("squeeze()",standstill) } } function squeeze(){ mes_joined=message[i_message] mes_split=mes_joined.split("|") contenttext="<span style='position:relative;font-family:"+font_face+"; color:"+font_color+";font-size:"+font_size+"pt;line-height:"+lineheight+";width:"+scrollerwidth+"px'>" contenttext+=mes_split[0] contenttext+="</span>" if (lineheight>0) { scrollertext.innerHTML=contenttext var timer=setTimeout("squeeze()",pause) lineheight-=linestep/2 } else { clearTimeout(timer) scrollertext.innerHTML="" changemessage() } } function changemessage() { i_message++ if (i_message>message.length-1) {i_message=0} lineheight=lineheightmax var timer=setTimeout("lineup()",1000) } </SCRIPT> <DIV id=scrollertext style="POSITION: absolute"></DIV> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：91站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

最令PHP初学者头痛的十	PHP初学示例详细学习
PHP实现上传文件生成小	菜鸟学习动态网页PHP