熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

用JavaScript實現上下文字滾動特效

2022-06-13   來源: JSP教程 

  文字左右滾動的走馬燈效果是一種非常容易實現的特效同樣的文字上下滾動循環顯示也是一種非常常見而且非常容易實現的文字特效

  具體實現方法如下


  <script language=javascript>
var messages=new Array()
messages[]=<font color=#FF>歡迎光臨賽迪網電腦應用頻道!</font></a>
messages[]=<font color=#FB>這裡有織網夢工廠</font></a>
messages[]=<font color=#FFF>是網頁初學者的學習園地</font></a>
messages[]=<font color=#FF>這裡沖浪指南針</font></a>
messages[]=<font color=#CC>是網絡愛好者天天必來充電的地方</font></a>
messages[]=<font color=#>這裡有…………有精彩的內容等著你</font></a>

var scrollerwidth=
var scrollerheight=
var scrollerbgcolor=#FFFFFF
//下面的代碼不要改動
if (messageslength>)
i=
else
i=
function move(whichlayer){
tlayer=eval(whichlayer)
if (tlayertop>&&tlayertop<=){
tlayertop=
setTimeout(move(tlayer))
setTimeout(move(documentmaindocumentsecond))
return}
if (tlayertop>=tlayerdocumentheight*){
tlayertop=
setTimeout(move(tlayer))}
else{
tlayertop=scrollerheight
tlayerdocumentwrite(messages[i])
tlayerdocumentclose()
if (i==messageslength)
i=
else
i++}}
function move(whichlayer){
tlayer=eval(whichlayer)
if (tlayertop>&&tlayertop<=){
tlayertop=
setTimeout(move(tlayer))
setTimeout(move(documentmaindocumentfirst))
return}
if (tlayertop>=tlayerdocumentheight*){
tlayertop=
setTimeout(move(tlayer))}
else{
tlayertop=scrollerheight
tlayerdocumentwrite(messages[i])
tlayerdocumentclose()
if (i==messageslength)
i=
else
i++}}
function move(whichdiv){
tdiv=eval(whichdiv)
if (tdivstylepixelTop>&&tdivstylepixelTop<=){
tdivstylepixelTop=
setTimeout(move(tdiv))
setTimeout(move(second))
return}
if (tdivstylepixelTop>=tdivoffsetHeight*){
tdivstylepixelTop=
setTimeout(move(tdiv))}
else{
tdivstylepixelTop=scrollerheight
tdivinnerHTML=messages[i]
if (i==messageslength)
i=
else
i++}}
function move(whichdiv){
tdiv=eval(whichdiv)
if (tdivstylepixelTop>&&tdivstylepixelTop<=){
tdivstylepixelTop=
setTimeout(move(tdiv))
setTimeout(move(first))
return}
if (tdivstylepixelTop>=tdivoffsetHeight*){
tdivstylepixelTop=
setTimeout(move(second))}
else{
tdivstylepixelTop=scrollerheight
tdivinnerHTML=messages[i]
if (i==messageslength)
i=
else
i++}}
function startscroll(){
if (documentall){
move(first)
secondstyletop=scrollerheight}
else if (documentlayers){
move(documentmaindocumentfirst)
documentmaindocumentsecondtop=scrollerheight+
documentmaindocumentsecondvisibility=show}}
windowonload=startscroll
</script>
<ilayer id=main width=&{scrollerwidth}; height=&{scrollerheight};
bgcolor=&{scrollerbgcolor};>
<layer id=first left= top= width=&{scrollerwidth};>
<script language=javascript>
if (documentlayers)
documentwrite(messages[])
</script>
</layer>
<layer id=second left= top= width=&{scrollerwidth}; visibility=hide>
<script language=javascript>
if (documentlayers)
documentwrite(messages[])
</script>
</layer>
</ilayer>
<script language=javascript>
if (documentall){
documentwriteln(<span id=main >)
documentwriteln(<div >)
documentwriteln(<div id=first >)
documentwrite(messages[])
documentwriteln(</div>)
documentwriteln(<div id=second >)
documentwrite(messages[])
documentwriteln(</div>)
documentwriteln(</div>)
documentwriteln(</span>)
}
</script>

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

  注意代碼中的var scrollerwidth=表示循環框寬度var scrollerheigh=表示循環框高度font color=# 代表文字顏色可以根據需要進行修改


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19753.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.