CSS JS text scrolling effect

HTML code
<div class= "box" id= "marqueebox0" >
<ul>
<li style= "background: #f8e2ac;" > First line </li>
<li style= "background: #f5f5f5;" > Second Line </li>
<li style= "background: #ffe6ec;" > Third Line </li>
</ul>
</div>

2. CSS Tutorial Code
box{width:150px height:25px;line-height:25px; border: #bbb 1px solid; overflow:hidden;}
. box ul{margin:0; padding:0}
. box li{height:25px; line-height:25px; font-size:12px; text-align:center; list-style-type:none;}

3, JS code
function StartMarquee (lh,speed,delay,index) {
/*
Parameters for function StartMarquee:
LH: The distance or height at which text scrolls up at a time;
Speed: rolling speed;
Delay: The time interval of rolling pause;
Index: The encapsulated function can be applied to different elements in the page;
*/
var T;
var P=false;
var O=document.getelementbyid ("Marqueebox" +index);
Gets the scrolling area object in the document, assigned to the variable o;
o.innerhtml+=o.innerhtml; The actual content in the object is copied, including two UL, of course the Li tag also from the original 3 lines, into 6 lines; The purpose of the copy is to provide a transition to text uninterrupted upward scrolling.
O.onmouseo Tutorial Ver=function () {p=true}
Mouse over, stop scrolling;
O.onmouseout=function () {P=false}
The mouse leaves and starts scrolling; P is true or false directly affects the execution of the start () function below;
o.scrolltop = 0;
The distance between the top of the text content and the top of the scrolling area, with an initial value of 0;
function Start () {
T=setinterval (Scrolling,speed); Every once in a while, SetInterval performs a scrolling function; the larger the speed, the greater the scrolling time interval and the slower the scrolling speed;
if (!p) {o.scrolltop + = 1;}
Scrolling stops or starts, depending on the boolean value of the p coming;
}
function scrolling () {
if (o.scrolltop%lh!=0) {
If it is not divided evenly, that is, the height of the move up is not up to LH, the content will continue to scroll up;
O.scrolltop + 1;
if (O.SCROLLTOP&GT;=O.SCROLLHEIGHT/2) o.scrolltop = 0;
The contents of object o are copied once, so its rolling height is actually twice times the height of the original content; When the content scrolls up to the height of the SCROLLHEIGHT/2, all 3 lines of text have been displayed once, so that the whole piece of content scrolltop to 0; wait for the next round of scrolling, In order to achieve the text uninterrupted upward scrolling effect;
}else{
Clearinterval (t);
Otherwise clear T, pause scrolling
SetTimeout (Start,delay);
After delay interval, start start () and scroll continuously
}
}
SetTimeout (Start,delay);
Start scrolling for the first time; settimeout executes the function start () after a certain time, and executes only once
}
Passing parameters
StartMarquee (25,30,3000,0);
With pause effect
StartMarquee (25,40,0,1);
Uninterrupted continuous