General JS class compatible with multi-browser subtitle effects marquee

Marquee. js

Parameter description:
The ID of the demo subtitle area tag (DIV;
Demo1/demo2: The ID demo1 of the content tag (Div or TD) is the original content, and demo2 is its copy;
Ction subtitle direction (Up, down, left, right );
Delay the delay time of subtitle playback (MS );
Step: The Stride of subtitle playback (I .e., the smaller the stride, for example, step = 1, the smoother the scrolling)

Function marquee (demo, demo1, demo2, direction, delay, step)
{
Direction = direction. tolowercase ();

If (Direction = "up" | direction = "down") & ($ (demo1 ). offsetheight> $ (DEMO ). offsetheight) | (Direction = "Left" | direction = "right") & ($ (demo1 ). offsetwidth> $ (DEMO ). offsetwidth )))
{
$ (Demo2). innerhtml =$ (demo1). innerhtml;
If (Direction = "down ")
$ (DEMO). scrolltop = 2 * $ (demo1). offsetheight-$ (DEMO). offsetheight;
If (Direction = "right ")
$ (DEMO). scrollleft = 2 * $ (demo1). offsetwidth-$ (DEMO). offsetwidth;
}
Else
Return;

VaR flag = true;
VaR speed = delay = NULL? 1: parseint (Delay );
VaR amount = step = NULL? 1: parseint (STEP );

VaR marquee = function ()
{
Switch (direction)
{
Case "up ":
If ($ (demo2). offsettop-$ (DEMO). scrolltop <= 0)
$ (DEMO). scrolltop-= $ (demo1). offsetheight;
Else
$ (DEMO). scrolltop + = amount;
Break;
Case "down ":
If ($ (demo1). offsettop-$ (DEMO). scrolltop> = 0)
$ (DEMO). scrolltop + = $ (demo2). offsetheight;
Else
$ (DEMO). scrolltop-= amount;
Break;
Case "Left ":
If ($ (demo2). offsetwidth-$ (DEMO). scrollleft <= 0)
$ (DEMO). scrollleft-= $ (demo1). offsetwidth;
Else
$ (DEMO). scrollleft + = amount;
Break;
Case "right ":
If ($ (DEMO). scrollleft <= 0)
$ (DEMO). scrollleft + = $ (demo2). offsetwidth;
Else
$ (DEMO). scrollleft-= amount;
Break;
Default: break;
}
}

VaR timer = setinterval (marquee, speed );

VaR play = function ()
{
If (FLAG)
{
Clearinterval (timer );
Timer = setinterval (marquee, speed );
}
}

$ (DEMO). onmouseover = function ()
{
If (FLAG)
Clearinterval (timer );
}

$ (DEMO). onmouseout = function ()
{
If (FLAG)
Timer = setinterval (marquee, speed );
}

This. Delay = function (s)
{
Speed = s = NULL? 50: parseint (s );
Play ();
}

This. Step = function (s)
{
Amount = s = NULL? 1: parseint (s );
Play ();
}

This. Start = function ()
{
If (! Flag)
{
Flag = true;
Play ();
}
}

This. Stop = function ()
{
If (FLAG)
{
Flag = false;
Clearinterval (timer );
}
}

This. Direction = function (s)
{
S = S. tolowercase ();
If (S = direction)
Return;
If (S = "down" & direction = "up ")
Direction = s;
If (S = "up" & direction = "down ")
Direction = s;
If (S = "right" & direction = "Left ")
Direction = s;
If (S = "Left" & direction = "right ")
Direction = s;
If (S = direction)
Play ();
}
}

$ Or $ f used in JS above, if you have used prototype. add it to Javascript. Otherwise, you need to reference the following JS file: Ruby. JS (from prototype. in JS)

Function Ruby ()
{
}

If (! Array. Prototype. Push ){
Array. Prototype. Push = function (){
VaR startlength = This. length;
For (VAR I = 0; I <arguments. length; I ++)
This [startlength + I] = arguments [I];
Return this. length;
}
}

$ = Function ()
{
VaR elements = new array ();

For (VAR I = 0; I <arguments. length; I ++ ){
VaR element = arguments [I];
If (typeof element = ''string '')
Element = Document. getelementbyid (element );

If (arguments. Length = 1)
Return element;

Elements. Push (element );
}

Return elements;
}

$ F = function ()
{
If (arguments. Length = 1)
Return document. getelementbyid (arguments [0]). value;
Else
{
VaR elements = new array ();
For (VAR I = 0; I <arguments. length; I ++)
{
Elements. Push (document. getelementbyid (arguments [I]). value );
}
Return elements;
}
}

By now, the JS file has been completed and HTML is written.Code:

(1) Add a CSS style first. If you do not want to scroll the content in the subtitle for no reason (sometimes)
<Style>
. Wrap {word-break: Break-all; overflow: hidden}
</Style>

(2) Add a JS file --> replace Ruby. js with prototype. js.
<SCRIPT src = "Ruby. js"> </SCRIPT>
<SCRIPT src = "marquee. js"> </SCRIPT>

(3) add subtitle area content
1. Scroll up or down

<Div id = "d1" style = "overflow: hidden; Height: 200px; width: 90px">
<Div id = "D11" width = "100%" class = "Wrap">
= Top = <br> motion zone pricing Overview 1 motion zone pricing Overview 2 <br> = Bottom =
</Div>
<Div id = "D12" width = "100%" class = "Wrap"> </div>
</Div>
<SCRIPT> var obj1 = new marquee ("d1", "D11", "D12", "up"); </SCRIPT>
Because the height of subtitle d1 is 200, and the content height of D11 is less than 200, subtitle does not scroll by default. to scroll, you only need to set the height of D11 to 200, therefore, you only need to put an empty DIV in D11 and set its height to 200. If the content height of D11 is greater than 200px, D1 will scroll continuously in the subtitle area.

2. Scroll left or right

<Div id = "D2" style = "overflow: hidden; width: 500">
<Table>
<Tr>
<TD id = "D21">
<Nobr>
[Start] Introduction to dynamic zones pricing 1 Introduction to dynamic zones pricing 2 Introduction to dynamic zones pricing 3 Introduction to dynamic zones pricing 4 Introduction to dynamic zones pricing 5 Introduction to dynamic zones pricing 6 Introduction to dynamic zones pricing 7 Introduction to dynamic zones pricing 8 Introduction to dynamic zones pricing 9 Introduction to dynamic zones introduction to tariff 10 dynamic zones Introduction 11 dynamic zones Introduction 12 dynamic zones Introduction 13 dynamic zones Introduction 14 dynamic zones Introduction 15 dynamic zones Introduction 16 dynamic zones Introduction 17 dynamic zones Introduction 18 dynamic zones Introduction 19 dynamic zones 20 [end]
</Nobr>
</TD>
<TD id = "D22"> </TD>
</Tr>
</Table>
</Div>
<SCRIPT> var obj2 = new marquee ("D2", "D21", "D22", "Left"); </SCRIPT>

The implementation principle is the same as above. As to why table is used instead of Div, it is because Div can only judge height by default, but not width, while table is the opposite, the nobr label used above is also required to prevent automatic line feed of subtitles!

Appendix: Change the playback delay speed obj2.delay (50); or obj2.delay ("50 ");
Change the playback step obj2.step (50); or obj2.step ("50 ");
Stop playing obj2.stop (); Continue playing obj2.start ();
Change the playback direction (in the same type) obj2.direction ("right ");