Recently, I want to present a list of up and down Scrolling on a large screen. The Marquee provided by IE cannot meet the requirements. I wrote a rolling mechanism with my own code in the attachment.
The Code is as follows:
Var STARTINGOPACITY = 40; // sets the opacity.
Var STARTINP = 70; // sets the transparency.
Var SCROLLSTUP = 1; // The scroll speed. 1 is a pixel.
Var SCROLLSYY = 100; // rolling time request
Var reqflg = false;
// Handles manual scrolling of the content //
Function scrollContent (parp, id, sub ){
Var p = document. getElementById ("textslider ");
Var psub = document. getElementById (sub );
Var PHA = document. getElementById (parp );
ClearInterval (p. timer );
P. style. opacity = STARTINGOPACITY *. 01;
P. style. filter = 'Alpha (opacity = '+ STARTINP + ')';
Var p2 = document. getElementById ("textslider2 ");
If (p2! = Null ){
ClearInterval (p2.timer );
P2.style. opacity = STARTINGOPACITY *. 01;
P2.style. filter = 'Alpha (opacity = '+ STARTINP + ')';
}
Var tem = p. innerHTML; // The first page
Tem1 ="
"+ Tem +"
"; // Second page
Var objheight = PHA. offsetHeight;
Var pheight = p. offsetHeight;
// Determine whether to scroll the screen. If not, do not scroll.
If (objheight If (! Reqflg ){
PLT. innerHTML + = tem1;
Reqflg = true;
P = document. getElementById ("textslider ");
P2 = document. getElementById ("textslider2 ");
// Set the height
P2.style. top = pheight-1 + "px ";
}
P. timer = setTimeout (function () {scrollAnimate (p, p2)}, SCROLLSYY );
}
}
Function scrollAnimate (p, p2 ){
// Obtain the top values of two subp values
Var ptop = p. offsetTop;
// Alert (ptop );
If (ptop = 0 ){
P. style. top = "0px ";
Ptop = 0;
}
Var p2top = p2.offsetTop;
If (p2top = 0 ){
P2top = 0;
P2.style. top = "0px ";
}
If (ptop // The first part is in the top part. The second part is in the bottom part.
P. style. top = ptop-SCROLLSTUP + 'px ';
P2.style. top = p2top-SCROLLSTUP + 'px ';
// Alert ("p. style. top: "+ p. style. top + "--- p2.style. top: "+ p2.style. top + ": height:" + p. offsetHeight );
// Determine whether to switch the position. If the height and position are equal to the top, switch
If (p. offsetTop =-p. offsetHeight ){
// Set top to bottom
P. style. top = p2.offsetHeight;
}
} Else {
// Number 2 is above and number 1 is below
P2.style. top = p2top-SCROLLSTUP + 'px ';
P. style. top = ptop-SCROLLSTUP + 'px ';
// Determine whether to switch the position. If the height and position are equal to the top, switch
If (p2.offsetTop =-p2.offsetHeight ){
// Set top to bottom
P2.style. top = p. offsetHeight;
}
}
P. timer = setTimeout (function () {scrollAnimate (p, p2)}, SCROLLSYY );
}
// Cancel the scrolling on mouseout //
Function cancelScroll (parp, id, sub ){
Var p = document. getElementById (id );
P. style. opacity = 1;
P. style. filter = 'Alpha (opacity = 100 )';
ClearTimeout (p. timer );
Var p2 = document. getElementById ("textslider2 ");
If (p2! = Null ){
P2.style. opacity = 1;
P2.style. filter = 'Alpha (opacity = 100 )';
ClearTimeout (p2.timer );
}
}
Package and download code