Text scroll effect (Operation node)

First, let's take a look at the effect:Demo
Next is the analysis of ideas:
The first is the idea of the main function:
1. Extract the first Li in the list and copy it.
2. Check whether the margin-top of Li is-20px.
If it is true, delete the first Li from UL and add its copy to the end of ul. And set the margin-top of Li to 0;
If this parameter is set to false, margin-top is reduced, such as-2. Call the main function using setTimeout until the value is true in step 2;
Then:
3. Define the onload event processing function of the window and use setinterval to repeatedly call the main function.
Note 1:Childnodes In the Firefox browser is different from children. In this example,

 

There are nine childnodes, and the first five are all text "\ n ". In this example, we want to operate on the node, that is, childnodes. Obviously, we cannot directly extract the first node of UL. Therefore, we have defined a getfirstchild function for filtering.

Note 2:In this example, the closure technique is used multiple times, which is very effective and necessary. Ensure that the parameters passed to the function are correct.CodeAs follows:

Window. setinterval (function () {scrollit (parentnode, 20,0)}, 3000 );
SetTimeout (function () {scrollit (OBJ, top, I) ;}, 20 );

For the closure, I will make a more detailed summary in the future log. Here I just want to emphasize its role.