JavaScript不僅可以實現(xiàn)文字左右滾動還能上下滾動，這樣的功能其實很容易實現(xiàn)，并且不用自己動手做。文字左右滾動的走馬燈效果是一種非常容易實現(xiàn)的特效，同樣的，文字上下滾動循環(huán)顯示也是一種非常常見而且非常容易實現(xiàn)的文字特效。

JavaScript教程之實現(xiàn)上下文字滾動特效

　　具體實現(xiàn)方法如下：

<script language=JavaScript><p>var messages=new Array()</p><p>messages[0]="<font color=#8000FF>歡迎光臨賽迪網電腦應用頻道！</font></a>"</p><p>messages[1]="<font color=#FB2500>這里有織網夢工廠</font></a>"</p><p>messages[2]="<font color=#FF0066F>是網頁初學者的學習園地</font></a>"</p><p>messages[3]="<font color=#FF9900>這里沖浪指南針</font></a>"</p><p>messages[4]="<font color=#00CC33>是網絡愛好者天天必來充電的地方</font></a>"</p><p>messages[5]="<font color=#000000>這里有…………有精彩的內容等著你</font></a>"</p><p>var scrollerwidth=320</p><p>var scrollerheight=100</p><p>var scrollerbgcolor=´#FFFFFF´</p><p>//下面的代碼不要改動</p><p>if (messages.length>1)</p><p>i=2</p><p>else</p><p>i=0</p><p>function move1(whichlayer){</p><p>tlayer=eval(whichlayer)</p><p>if (tlayer.top>0&&tlayer.top<=5){</p><p>tlayer.top=0</p><p>setTimeout("move1(tlayer)",3000)</p><p>setTimeout("move2(document.main.document.second)",3000)</p><p>return}</p><p>if (tlayer.top>=tlayer.document.height*-1){</p><p>tlayer.top-=5</p><p>setTimeout("move1(tlayer)",100)}</p><p>else{</p><p>tlayer.top=scrollerheight</p><p>tlayer.document.write(messages[i])</p><p>tlayer.document.close()</p><p>if (i==messages.length-1)</p><p>i=0</p><p>else</p><p>i++}}</p><p>function move2(whichlayer){</p><p>tlayer2=eval(whichlayer)</p><p>if (tlayer2.top>0&&tlayer2.top<=5){</p><p>tlayer2.top=0</p><p>setTimeout("move2(tlayer2)",3000)</p><p>setTimeout("move1(document.main.document.first)",3000)</p><p>return}</p><p>if (tlayer2.top>=tlayer2.document.height*-1){</p><p>tlayer2.top-=5</p><p>setTimeout("move2(tlayer2)",100)}</p><p>else{</p><p>tlayer2.top=scrollerheight</p><p>tlayer2.document.write(messages[i])</p><p>tlayer2.document.close()</p><p>if (i==messages.length-1)</p><p>i=0</p><p>else</p><p>i++}}</p><p>function move3(whichdiv){</p><p>tdiv=eval(whichdiv)</p><p>if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){</p><p>tdiv.style.pixelTop=0</p><p>setTimeout("move3(tdiv)",3000)</p><p>setTimeout("move4(second2)",3000)</p><p>return}</p><p>if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){</p><p>tdiv.style.pixelTop-=5</p><p>setTimeout("move3(tdiv)",100)}</p><p>else{</p><p>tdiv.style.pixelTop=scrollerheight</p><p>tdiv.innerHTML=messages[i]</p><p>if (i==messages.length-1)</p><p>i=0</p><p>else</p><p>i++}}</p><p>function move4(whichdiv){</p><p>tdiv2=eval(whichdiv)</p><p>if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){</p><p>tdiv2.style.pixelTop=0</p><p>setTimeout("move4(tdiv2)",3000)</p><p>setTimeout("move3(first2)",3000)</p><p>return}</p><p>if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){</p><p>tdiv2.style.pixelTop-=5</p><p>setTimeout("move4(second2)",100)}</p><p>else{</p><p>tdiv2.style.pixelTop=scrollerheight</p><p>tdiv2.innerHTML=messages[i]</p><p>if (i==messages.length-1)</p><p>i=0</p><p>else</p><p>i++}}</p><p>function startscroll(){</p><p>if (document.all){</p><p>move3(first2)</p><p>second2.style.top=scrollerheight}</p><p>else if (document.layers){</p><p>move1(document.main.document.first)</p><p>document.main.document.second.top=scrollerheight+5</p><p>document.main.document.second.visibility=´show´}}</p><p>window.onload=startscroll</p><p></script></p><p><ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight};</p><p>bgcolor=&{scrollerbgcolor};></p><p><layer id="first" left=0 top=1 width=&{scrollerwidth};></p><p><script language="JavaScript1.2"></p><p>if (document.layers)</p><p>document.write(messages[0])</p><p></script></p><p></layer></p><p><layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide></p><p><script language="JavaScript1.2"></p><p>if (document.layers)</p><p>document.write(messages[1])</p><p></script></p><p></layer></p><p></ilayer></p><p><script language="JavaScript1.2"></p><p>if (document.all){</p><p>document.writeln(´<span id="main2" style="position:relative;width:´+scrollerwidth+´;height:´</p><p>+scrollerheight+´;overflow:hiden;background-color:´+scrollerbgcolor+´">´)</p><p>document.writeln(´<div style="position:absolute;width:´+scrollerwidth+´;height:´</p><p>+scrollerheight+´;clip:rect(0 ´+scrollerwidth+´ ´</p><p>+scrollerheight+´ 0);left:0;top:0">´)</p><p>document.writeln(´<div id="first2" style="position:absolute;width:´+scrollerwidth+´;left:0;top:1;">´)</p><p>document.write(messages[0])</p><p>document.writeln(´</div>´)</p><p>document.writeln(´<div id="second2" style="position:absolute;width:´+scrollerwidth+´;left:0;top:0">´)</p><p>document.write(messages[1])</p><p>document.writeln(´</div>´)</p><p>document.writeln(´</div>´)</p><p>document.writeln(´</span>´)</p><p>}</p><p></script></p>

　　（在需要添加該特效的網頁具體位置中粘貼如下代碼即可）

　　注意：代碼中的“var scrollerwidth=320”表示循環(huán)框寬度，“var scrollerheigh=100”表示循環(huán)框高度，“font color=# ”代表文字顏色，可以根據需要進行修改。