Core code:
Copy codeThe Code is 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 Code:
Copy codeThe Code is 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, // scroll step
251, // container visible width
520, // visible height of the container
50, // The smaller the timer value, the faster the scrolling speed (1000 = 1 second, we recommend not less than 20)
2000, // intermittent pause time (0 indicates no pause, 1000 = 1 second)
3000, // The wait time at the start (0 is not waiting, 1000 = 1 second)
75 // intermittent rolling interval (optional), which can be understood as the Row Height. Here I am 3*25 = 75, that is, three rows are rolled at a time.
);
};
-->
</Script>
Demo:
Below is my HTML code. I can see what is going on at a Glance: <ul id = "s1"> <li> unofficial ghost places in the third empire </li> <li> unofficial regulations in the third empire ghost location ghost location </li> <li> unofficial ghost location where the third empire has probably issued regulations </li> <li> the third empire has probably issued unofficial Regulations ghost location ghost location </li> <li> unofficial ghost location where the third empire has probably issued regulations </li> <li> the third empire has probably issued unofficial Regulations ghost location ghost location </li> <li> unofficial ghost location where the third empire has probably issued regulations </li> <li> the third empire has probably issued unofficial Regulations ghost location ghost location </li> <li> unofficial ghost location where the third empire has probably issued regulations </li> <li> the third empire has probably issued unofficial Regulations ghost location ghost location </li> <li> unofficial ghost location where the third empire has probably issued regulations </li> <li> the third empire has probably issued unofficial Regulations ghost location ghost location </li> <li> unofficial ghost location where the third empire has probably issued regulations </li> <li> the third empire has probably issued unofficial Regulations ghost location ghost location </li> <li> unofficial ghost location where the third empire has probably issued regulations </li> <li> the third empire has probably issued unofficial Regulations ghost location ghost location </li> <li> unofficial ghost location where the third empire has probably issued regulations </li> <li> the third empire has probably issued unofficial Regulations ghost location ghost location </li> <li> unofficial ghost location where the third empire has probably issued regulations </li> <li> the third empire has probably issued unofficial Regulations ghost location ghost location </li> <li> unofficial ghost location where the third empire has probably issued regulations </li> <li> the third empire has probably issued unofficial Regulations ghost location </li> </ul>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]