Simple implementation of rolling news bar

　　

When dealing with intermittent seamless rolling of news on pages, the most common method is to copy and append a copy of the content in the rolling area, and then implement the rolling stop effect by controlling and judging the scrolltop of the Rolling Block.

In fact, in many cases, it is easier to implement intermittent seamless rolling through node operations.

The Code is as follows:

<Script language = "JavaScript" type = "text/JavaScript">
Window. onload = function (){
VaR o = Document. getelementbyid ('box ');
Window. setinterval (function () {scrollup (O, 24, 0) ;}, 3000 );
}
/// Rolling master Method
/// Parameter: O Rolling Block object
/// Parameter: d the height of each scrolling Screen
/// Parameter: C the current rolling height
Function scrollup (O, D, C ){
If (D = c ){
VaR T = getfirstchild (O. firstchild). clonenode (true );
O. removechild (getfirstchild (O. firstchild ));
O. appendchild (t );
T. style. margintop = "0px ";
} Else {
C + = 2;
Getfirstchild (O. firstchild). style. margintop =-C + "PX ";
Window. setTimeout (function () {scrollup (O, D, C)}, 20 );
}
}
// Solve the problem that Firefox uses space-based carriage return as a node.
Function getfirstchild (node ){
While (node. nodetype! = 1)
{
Node = node. nextsibling;
}
Return node;
}
</SCRIPT>
<Ul id = "box">
<Li> · Xinhua Daily Telecom: The Music Copyright charges are like "one group of troubles" </LI>
<Li> · modern Express: Can humans marry robots to have children? </LI>
<Li> · Global: bankruptcy of a billionaire club in the United States </LI>
<Li> · modern Express: to let the media seal Ni Zhen to sell Li jiaxin Love Letters </LI>
<Li> · Jinghua Times: Beijing University of Aeronautics and Astronautics student self-made rocket Promotion Day </LI>
</Ul>