JavaScript圖文教程之完成上下文字滾動特效_javascript
發布時間:2021-12-27 文章來源:xp下載站 瀏覽:
|
軟件是一系列按照特定順序組織的計算機數據和指令的集合。一般來講軟件被劃分為編程語言、系統軟件、應用軟件和介于這兩者之間的中間件。硬件是“計算機硬件”的簡稱。與“軟件”相對,電子計算機系統中所有實體部件和設備的統稱。 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=# ”代表文字顏色，可以根據需要進行修改。 硬件是實在的，有模有樣的。軟件是程序性的。是一系列的指令。有了軟件，硬件才會實現更豐富的功能。 |
相關文章
下一篇：天貓雙11狂購攻略大全