js 上下文字滾動效果

2019-11-21 00:20:53

字體：大中小

供稿：網(wǎng)友

js實(shí)現(xiàn)的文字向上滾動效果，適合文字公告等。

<!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   class="iwvjtn8m0"   id="textHeight" title="xx"> <a href="#">博客園</a> <span> | </span> <a href="#">武林網(wǎng)</a> <span> | </span> <a href="#">csdn</a> <span> | </span> <a href="#">藍(lán)色理想</a> <span> | </span> <a href="#">51js</a> <span> | </span> </div> <script> var scrollup = new ScrollText("textHeight"); scrollup.Start(); </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：js+css在交互上的應(yīng)用

下一篇：基于jQuery試卷自動排版系統(tǒng)