JavaScript圖文詳細教程之完成上下文字滾動特效_javascript

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

JavaScript教程之實現上下文字滾動特效

　　具體實現方法如下：

<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”表示循環框寬度，“var scrollerheigh=100”表示循環框高度，“font color=# ”代表文字顏色，可以根據需要進行修改。