Multi-browser-compatible subtitle effects marquee General JS class _ Link effects

Marquee.js

Parameter description:
Demo Caption Area label (DIV) ID;
DEMO1/DEMO2 Displays the ID demo1 of the content label (DIV or TD) as the original content, and Demo2 is its copy;
Direction caption direction (up,down,left,right);
The delay time (milliseconds) of delay subtitles playback;
Step subtitle (i.e. pix, smaller step size, such as step=1, smoother 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 ();
}
}

The above JS used in the $ or $f, if you have used prototype.js words, add it to the line; Otherwise you need to first refer to the following JS file: Ruby.js (from the prototype.js cut over the hehe)



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;
}
}

Here, JS file has been done, and began to write HTML code:

(1) First add CSS style, if you do not want to scroll the contents of the caption is not the reason to support the big words (sometimes)
<style>
. Wrap{word-break:break-all;overflow:hidden}
</style>

(2) Add JS file--> used prototype.js better, replace the ruby.js:)
<script src= "Ruby.js" ></script>
<script src= "Marquee.js" ></script>

(3) Add caption 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> Mobile Zone tariff Strategy 1 mobile zone tariff strategy 2<br>= bottom =
</div>
<div id= "D12" width= "100%" class= "wrap" ></div>
</div>
<script>var obj1 = new Marquee ("D1", "D11", "D12", "Up");</script>
Due to the subtitle D1 height=200, and D11 content is less than 200, so the caption will not scroll by default, to achieve scrolling, just D11 height>200 on the line, so just in the D11 inside and then put an empty div on the line, let it's height=200; If the content height of the D11 is greater than 200px, the subtitle area D1 will scroll without interruption

2. Scroll left or right


<div id= "D2" style= "overflow:hidden;width:500" >
<table>
<tr>
&LT;TD id= "D21" >
<nobr>
[Start] Mobile zone tariff Strategy 1 mobile Zone tariff Strategy 2 Mobile Zone tariff Strategy 3 Mobile Zone tariff Strategy 4 Mobile Zone tariff Strategy 5 Mobile Zone tariff Strategy 6 mobile Zone tariff Strategy 7 Mobile Zone tariff Strategy 8 Mobile Zone Tariff Introduction 9 Mobile Zone tariff Strategy 10 Mobile Zone tariff Strategy 11 dynamic Zone Capital Introduction to the 12 Mobile zone tariff Strategy 13 mobile zone tariff Strategy 14 mobile zone tariff Strategy 15 mobile zone tariff Strategy 16 mobile Zone tariff Strategy 17 dynamic Zone Tariff Strategy 18 dynamic zone tariff strategy of the region to the end of 20[
</nobr>
</td>
&LT;TD id= "D22" ></td>
</tr>
</table>
</div>
<script>var obj2 = new Marquee ("D2", "D21", "D22", "left");</script>

Implementation of the principle of the same, as for why here to use the table without Div, because div in the default can only judge the height, and can not judge the width, and table is the opposite, the use of the nobr tag is also required, to prevent subtitles automatically line-wrapping!

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