Use JavaScript to implement the special effects of text Scrolling up and down

It is a very easy-to-implement special effect to roll between the left and right sides of a text. Similarly, text scrolling and loop display are also very common and easy-to-implement special effects.

The specific implementation method is as follows:

<Script language = JavaScript>
VaR messages = new array ()
Messages [0] = "<font color = # 8000ff> welcome to looky's blog! </Font> </a>"
Messages [1] = "<font color = # fb2500> This is an example of using JavaScript to implement context-based scrolling effects </font> </a>"
Messages [2] = "<font color = # ff0066f> hope this example can help you </font> </a>"
Messages [3] = "<font color = # ff9900> You can reprint the code here </font> </a>"
Messages [4] = "<font color = #00cc33> everything here is free </font> </a>"
Messages [5] = "<font color = #000000> here ............ There are wonderful contents Waiting For You </font> </a>"

VaR scrolling erwidth = 320
VaR scrolling erheight = 100
VaR scrollerbgcolor = '# ffff'
// Do not change the following code
If (messages. length> 1)
I = 2
Else
I = 0
Function move1 (whichlayer ){
Tlayer = eval (whichlayer)
If (tlayer. Top> 0 & tlayer. Top <= 5 ){
Tlayer. Top = 0
SetTimeout ("move1 (tlayer)", 3000)
SetTimeout ("move2(document.main.doc ument. Second)", 3000)
Return}
If (tlayer. Top> fig. Doc ument. Height *-1 ){
Tlayer. Top-= 5
SetTimeout ("move1 (tlayer)", 100 )}
Else {
Tlayer. Top = scrollerheight
Tlayer.doc ument. Write (messages [I])
Tlayer.doc ument. Close ()
If (I = messages. Length-1)
I = 0
Else
I ++ }}
Function move2 (whichlayer ){
Tlayer2 = eval (whichlayer)
If (tlayer2.top> 0 & tlayer2.top <= 5 ){
Tlayer2.top = 0
SetTimeout ("move2 (tlayer2)", 3000)
SetTimeout ("move1(document.main.doc ument. First)", 3000)
Return}
If (tlayer2.top> extends tlayer2.doc ument. Height *-1 ){
Tlayer2.top-= 5
SetTimeout ("move2 (tlayer2)", 100 )}
Else {
Tlayer2.top = scrollerheight
Tlayer2.document. Write (messages [I])
Tlayer2.document. Close ()
If (I = messages. Length-1)
I = 0
Else
I ++ }}
Function move3 (whichdiv ){
Tdiv = eval (whichdiv)
If (tdiv. style. pixeltop> 0 & tdiv. style. pixeltop <= 5 ){
Tdiv. style. pixeltop = 0
SetTimeout ("move3 (tdiv)", 3000)
SetTimeout ("move4 (second2)", 3000)
Return}
If (tdiv. style. pixeltop> = tdiv. offsetheight *-1 ){
Tdiv. style. pixeltop-= 5
SetTimeout ("move3 (tdiv)", 100 )}
Else {
Tdiv. style. pixeltop = scrollerheight
Tdiv. innerhtml = messages [I]
If (I = messages. Length-1)
I = 0
Else
I ++ }}
Function move4 (whichdiv ){
Tdiv2 = eval (whichdiv)
If (tdiv2.style. pixeltop> 0 & tdiv2.style. pixeltop <= 5 ){
Tdiv2.style. pixeltop = 0
SetTimeout ("move4 (tdiv2)", 3000)
SetTimeout ("move3 (first2)", 3000)
Return}
If (tdiv2.style. pixeltop> = tdiv2.offsetheight *-1 ){
Tdiv2.style. pixeltop-= 5
SetTimeout ("move4 (second2.)", 100 )}
Else {
Tdiv2.style. pixeltop = scrollerheight
Tdiv2.innerhtml = messages [I]
If (I = messages. Length-1)
I = 0
Else
I ++ }}
Function startscroll (){
If (document. All ){
Move3 (first2)
Second2.style. Top = scrollerheight}
Else if (document. layers ){
Move1(document.main.doc ument. First)
Document.main.doc ument. Second. Top = scrollerheight + 5
Document.main.doc ument. Second. Visibility = 'show '}}
Window. onload = startscroll
</SCRIPT>
<Ilayer id = "Main" width = & {scrollerwidth}; Height = & {scrollerheight };
Bgcolor = & {scrollerbgcolor};>
<Layer id = "first" Left = 0 Top = 1 width = & {scrollerwidth};>
<Script language = "javascript1.2">
If (document. layers)
Document. Write (messages [0])
</SCRIPT>
</Layer>
<Layer id = "second" Left = 0 Top = 0 width = & {scrollerwidth}; visibility = hide>
<Script language = "javascript1.2">
If (document. layers)
Document. Write (messages [1])
</SCRIPT>
</Layer>
</Ilayer>
<Script language = "javascript1.2">
If (document. All ){
Document. writeln ('<span id = "main2" style = "position: relative; width:' + scrollerwidth + '; Height :'
+ Scrollerheight + '; overflow: hiden; Background-color:' + scrollerbgcolor + '"> ')
Document. writeln ('<Div style = "position: absolute; width:' + scrollerwidth + '; Height :'
+ Scrollerheight + '; clip: rect (0' + scrollerwidth +''
+ Scrollerheight + '0); left: 0; top: 0 "> ')
Document. writeln ('<Div id = "first2" style = "position: absolute; width:' + scrollerwidth + '; left: 0; top: 1;"> ')
Document. Write (messages [0])
Document. writeln ('</div> ')
Document. writeln ('<Div id = "second2" style = "position: absolute; width:' + scrollerwidth + '; left: 0; top: 0"> ')
Document. Write (messages [1])
Document. writeln ('</div> ')
Document. writeln ('</div> ')
Document. writeln ('</span> ')
}
</SCRIPT>

(Paste the following code in the specific location of the webpage to which the special effect is to be added)

Note: "Var scrollerwidth = 320" in the Code indicates the width of the loop box, "Var scrollerheigh = 100" indicates the height of the loop box, and "font color = #" indicates the text color, it can be modified as needed.