js 上下文字滚动效果

更新时间：2010年07月18日 23:28:24 作者：

用js实现的上下文字滚动效果代码，需要的朋友可以参考下。

js实现的文字向上滚动效果，适合文字公告等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>test</title> <style type="text/css"> #textHeight{line-height:25px; height:25px; overflow:hidden; width:150px; font-size:12px; border:solid 1px #666;} </style> <script language="javascript" type="text/javascript"> function ScrollText(content){ this.Delay=10; this.Amount=1; this.Direction="up"; this.Timeout=1000; this.ScrollContent=this.gid(content); this.ScrollContent.innerHTML += this.ScrollContent.innerHTML; this.ScrollContent.onmouseover = this.GetFunction(this,"Stop"); this.ScrollContent.onmouseout = this.GetFunction(this,"Start"); } ScrollText.prototype.gid=function(element){ return document.getElementById(element); } ScrollText.prototype.Stop=function(){ clearTimeout(this.AutoScrollTimer); clearTimeout(this.ScrollTimer); } ScrollText.prototype.Start=function(){ clearTimeout(this.AutoScrollTimer); this.AutoScrollTimer=setTimeout(this.GetFunction(this,"AutoScroll"),this.Timeout); } ScrollText.prototype.AutoScroll=function(){ if(this.Direction=="up"){ if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){ this.ScrollContent.scrollTop=0; clearTimeout(this.AutoScrollTimer); this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout); return; } this.ScrollContent.scrollTop += this.Amount; }else { if(parseInt(this.ScrollContent.scrollTop) <= 0) { this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2; } this.ScrollContent.scrollTop -= this.Amount; } if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) { this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Delay); } else { this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout); } } ScrollText.prototype.GetFunction=function(variable,method){ return function() { variable[method](); } } </script> </head> <body> <div id="textHeight" title="xx"> <a href="#">博客园</a> <span> | </span> <a href="#">脚本之家</a> <span> | </span> <a href="#">csdn</a> <span> | </span> <a href="#">蓝色理想</a> <span> | </span> <a href="#">51js</a> <span> | </span> </div> <script> var scrollup = new ScrollText("textHeight"); scrollup.Start(); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

让链接必须按先后顺序点击的JS代码
让链接必须按先后顺序点击的JS代码，用到广告上面比较好，有不少的文字或图片广告有类似效果，点链接的时候需要按顺序，请注意链接地址，写在JS代码里的是真正需要的地址。
2009-10-10
Javascript 小写字母依次变为大写
Javascript把小写字母依次变为大写，严格来说不算是大小写转换程序，它主要是把文字按一定顺序依次变为小写的，估计有人要用到吧。
2009-10-10
javascript 网页上跳动的文字
网页上跳动的文字，代码稍复杂，效果挺可爱的，一跳一跳的文字，真逗人！
2009-10-10
javascript 走马灯效果的链接提示
走马灯效果的链接提示，大家的需求不一样，因此可能有朋友会喜欢这样的链接提示，用到的话，再好好美化一下，其实效果还是不错的。
2009-10-10
JavaScript 仿歌词效果
这是一个文字叠加滚动效果，当然离不开JavaScript了，看上去像MTV的歌词效果，用两种颜色的文字叠加形成的效果，用Js去控制时间和颜色，这个当然你可以自己修改噢！
2009-10-10
javascript实现的网页标题变换效果(网页游戏广告常用)
很多游戏广告的推广页面中，为了吸引眼球，我们看到IE标题栏与状态栏中都是来回闪动的效果。
2011-01-01
纯CSS 链接悬停提示效果代码
CSS做出漂亮的鼠标悬停提示效果，使用层的绝对定位，不管你的网页窗口如何变化，提示层始终处于理想位置不会改变，兼容性也良好，因些很实用的一个链接提示功能代码。
2009-10-10
javascript 模拟Marquee文字向左均匀滚动代码
Marquee是HTML语言里固有的文字滚动标签，虽然用着方便，但是功能上有一些限制，很多时候我们都是通过JavaScript来补充这一功能.
2009-10-10
简介内容超出部分文字隐藏省略的特效(可显示)
如果字数找过特定的字符数，那么超过这个字符数后的文字就显示省略号... 然后出现【展开】或省略号，点击之后就出现全部内容
2011-10-10
Js 打字效果逐一出现的文字
JavaScript特效，逐个出现的文字，像打字的效果差不多。
2009-10-10

js 上下文字滚动效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具