Compatible with multi-browser subtitle effects Marquee's common js class _ link Effects

The main reason is that the Marquee in IE is not universal and cannot work normally in other browsers. Therefore, JavaScript is used to rewrite its functions to support multiple browsers! The function has been encapsulated in Marquee. js and supports uninterrupted scrolling (default). If the content length and width in the subtitle area are smaller than the length and width set in the subtitle area, it is not rolled by default! Supports dynamic update of rolling speed and direction! Marquee. js

Parameter description:
The ID of the demo subtitle area tag (p;
Demo1/demo2: The ID demo1 of the content tag (p 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 is ready and you can start to write HTML code:

(1) Add a css style first. If you do not want to scroll the content in the subtitle for no reason (sometimes)


(2) Add a js file --> replace Ruby. js with prototype. js :)