JavaScript down and around timed scrolling plug-in _ text effects

Core code:

Copy Code code as follows:

<script type= "Text/javascript" >
function Marquee () {
This.id = document.getElementById (Arguments[0]);
This. Direction = arguments[1];
This. Step = arguments[2];
This. Width = arguments[3];
This. Height = arguments[4];
This. Timer = arguments[5];
This. waittime = arguments[6];
This. StopTime = arguments[7];
if (Arguments[8]) {this. Scrollstep = arguments[8]; } else {this. Scrollstep = this. Direction > 1? This. Width:this. Height; }
This. CTL = this. Startid = this. Stop = this. MouseOver = 0;
This. ID.style.overflowX = this. ID.style.overflowY = "hidden";
This. Id.nowrap = true;
This. ID.style.width = this. Width;
This. ID.style.height = this. Height;
This. Clientscroll = this. Direction > 1? This. ID.scrollWidth:this. Id.scrollheight;
This. Id.innerhtml = this. id.innerhtml;
This. Start (this, this. Timer, this. Waittime, this. StopTime);
}
Marquee.prototype.Start = function (msobj, timer, waittime, stoptime) {
Msobj. Startid = function () {msobj. Scroll (); }
Msobj. Continue = function () {
if (msobj. MouseOver = = 1) {settimeout (msobj). Continue, waittime); }
else {clearinterval (msobj. Timerid); Msobj. CTL = Msobj. Stop = 0; Msobj. Timerid = SetInterval (msobj. Startid, timer); }
}
Msobj. Pause = function () {msobj. Stop = 1; Clearinterval (msobj. Timerid); SetTimeout (msobj. Continue, waittime); }
Msobj. Begin = function () {
Msobj. Timerid = SetInterval (msobj. Startid, timer);
Msobj. Id.onmouseover = function () {msobj. MouseOver = 1; Clearinterval (msobj. Timerid); }
Msobj. Id.onmouseout = function () {msobj. MouseOver = 0; if (msobj. Stop = 0) {clearinterval (msobj). Timerid); Msobj. Timerid = SetInterval (msobj. Startid, timer); } }
}
SetTimeout (msobj. Begin, StopTime);
}
Marquee.prototype.Scroll = function () {
Switch (this. Direction) {
Case 0:
This. CTL + this. Step;
if (this. CTL >= this. Scrollstep && this. waittime > 0) {this. Id.scrolltop = this. Scrollstep + this. Step-this. CTL; This. Pause (); Return }
else {if (this. Id.scrolltop >= this. Clientscroll) this. Id.scrolltop = this. Clientscroll; This. Id.scrolltop = this. Step; }
Break
Case 1:
This. CTL + this. Step;
if (this. CTL >= this. Scrollstep && this. waittime > 0) {this. Id.scrolltop = this. Scrollstep + this. Step-this. CTL; This. Pause (); Return }
else {if (this. Id.scrolltop <= 0) this. Id.scrolltop = this. Clientscroll; This. Id.scrolltop = this. Step; }
Break
Case 2:
This. CTL + this. Step;
if (this. CTL >= this. Scrollstep && this. waittime > 0) {this. Id.scrollleft = this. Scrollstep + this. Step-this. CTL; This. Pause (); Return }
else {if (this. Id.scrollleft >= this. Clientscroll) this. Id.scrollleft = this. Clientscroll; This. Id.scrollleft = this. Step; }
Break
Case 3:
This. CTL + this. Step;
if (this. CTL >= this. Scrollstep && this. waittime > 0) {this. Id.scrollleft = this. Scrollstep + this. Step-this. CTL; This. Pause (); Return }
else {if (this. Id.scrollleft <= 0) this. Id.scrollleft = this. Clientscroll; This. Id.scrollleft = this. Step; }
Break
}
}
</script>

Control the use of code:

Copy Code code as follows:

<script type= "Text/javascript" >
<!--
Window.onload = function () {
New Marquee (
"S1",//Container ID
0,//scroll up (0 up 1 down 2 to left 3 to right)
2,//scrolling step
251,//container visual width
520,//container visual height
50, the smaller the value of the//timer, the faster the scrolling speed (1000=1 seconds, recommended not less than 20)
2000,//Intermittent pause time (0 for no pauses, 1000=1 seconds)
3000,//Start wait time (0 for no wait, 1000=1 seconds)
75//Intermittent scrolling spacing (optional), can be understood as row height, I am here is 3*25=75, is to scroll three rows at a time
);
};
-->
</script>

Effect Demo:

<script type= "Text/javascript" > Function Marquee () {this.id = document.getElementById (arguments[0)); This. Direction = arguments[1]; This. Step = arguments[2]; This. Width = arguments[3]; This. Height = arguments[4]; This. Timer = arguments[5]; This. waittime = arguments[6]; This. StopTime = arguments[7]; if (Arguments[8]) {this. Scrollstep = arguments[8]; } else {this. Scrollstep = this. Direction > 1? This. Width:this. Height; } this. CTL = this. Startid = this. Stop = this. MouseOver = 0; This. ID.style.overflowX = this. ID.style.overflowY = "hidden"; This. Id.nowrap = true; This. ID.style.width = this. Width; This. ID.style.height = this. Height; This. Clientscroll = this. Direction > 1? This. ID.scrollWidth:this. Id.scrollheight; This. Id.innerhtml = this. id.innerhtml; This. Start (this, this. Timer, this. Waittime, this. StopTime); } Marquee.prototype.Start = function (msobj, timer, waittime, stoptime) {msobj. Startid = function () {msobj. Scroll (); } msobj. Continue = fUnction () {if (msobj). MouseOver = = 1) {settimeout (msobj). Continue, waittime); else {clearinterval (msobj). Timerid); Msobj. CTL = Msobj. Stop = 0; Msobj. Timerid = SetInterval (msobj. Startid, timer); }} msobj. Pause = function () {msobj. Stop = 1; Clearinterval (msobj. Timerid); SetTimeout (msobj. Continue, waittime); } msobj. Begin = function () {msobj. Timerid = SetInterval (msobj. Startid, timer); Msobj. Id.onmouseover = function () {msobj. MouseOver = 1; Clearinterval (msobj. Timerid); } msobj. Id.onmouseout = function () {msobj. MouseOver = 0; if (msobj. Stop = 0) {clearinterval (msobj). Timerid); Msobj. Timerid = SetInterval (msobj. Startid, timer); }} settimeout (Msobj. Begin, StopTime); } Marquee.prototype.Scroll = function () {switch (this. Direction) {case 0:this. CTL + this. Step; if (this. CTL >= this. Scrollstep && this. waittime > 0) {this. Id.scrolltop = this. Scrollstep + this. Step-this. CTL; This. Pause (); Return } else {if (this. Id.scrolltop >= this. ClientscRoll) this. Id.scrolltop = this. Clientscroll; This. Id.scrolltop = this. Step; } break; Case 1:this. CTL + this. Step; if (this. CTL >= this. Scrollstep && this. waittime > 0) {this. Id.scrolltop = this. Scrollstep + this. Step-this. CTL; This. Pause (); Return } else {if (this. Id.scrolltop <= 0) this. Id.scrolltop = this. Clientscroll; This. Id.scrolltop = this. Step; } break; Case 2:this. CTL + this. Step; if (this. CTL >= this. Scrollstep && this. waittime > 0) {this. Id.scrollleft = this. Scrollstep + this. Step-this. CTL; This. Pause (); Return } else {if (this. Id.scrollleft >= this. Clientscroll) this. Id.scrollleft = this. Clientscroll; This. Id.scrollleft = this. Step; } break; Case 3:this. CTL + this. Step; if (this. CTL >= this. Scrollstep && this. waittime > 0) {this. Id.scrollleft = this. Scrollstep + this. Step-this. CTL; This. Pause (); Return } else {if (this. Id.scrollleft <= 0) this. Id.scrollleft = this. Clientscroll; THis. Id.scrollleft = this. Step; } break; } </script> below is my HTML code, and I can see what's going on: <ul id= "S1" > <li> the Third Reich, the unofficial ghost place where the statute was issued. Ghost Place </li> <li& gt; The Third Reich sends probably unofficial ghost places of the statute the Ghosts Place </li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> Third Reich send probably the unofficial ghost place where the statute is </li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the statute of the unofficial Ghost place </ Li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the statute of the unofficial Ghost place </ Li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the unofficial ghost place of the statute the Ghost Place </li> <li> The Third Reich sends probably the statute of the unofficial Ghost place </ Li> <li> The Third Reich send probably the unofficial ghost place where the statute is the Ghost place </li> <li> the Third Reich.Square Ghost Place Ghost Place </li> <li> Third Reich send probably the unofficial ghost place of the statute the Ghost Place </li> </ul> <script type= "Text/javascript" > <!--window.onload = function () {New Marquee ("S1",//container ID 0,//scroll up (0 up 1 down 2 left 3 right) 2,//scrolling step 251,//container visual width 520,//container visual height 50,//the smaller the value of the timer, the faster the scrolling speed (1000=1 seconds, recommended not less than 20) 2000,//Intermittent pause time (0 for no pauses, 1000=1 seconds) 3000,///Start time (0 for no wait, 1000=1 seconds) 75 Intermittent scrolling spacing (optional), can be understood as row height, I am here is 3*25=75, is a rolling three lines each time); }; --> </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]