JS implements continuous upward scrolling of a single line of text, and js continuously scrolls

JS implements continuous upward scrolling of a single line of text, and js continuously scrolls

This example describes how to use JavaScript to continuously scroll up a single line of text. Share it with you for your reference. The specific analysis is as follows:

A few days ago, I helped a friend write a JS effect with a single line of text rolling up without interruption. Now I want to share it with the required weber. First look at the HTML and CSS code:

CSS:
Copy codeThe Code is as follows:. wrap {padding: 10px; border: 1px # ccc solid; width: 500px; margin: 20px auto ;}
. Roll-wrap {height: 130px; overflow: hidden ;}

HTML:
Copy codeThe Code is as follows: <div class = "wrap">
<Div class = "roll-wrap" id = "roll-wrap">
<Ul>
<Li> JS text scroll up 1 </li>
<Li> JS text scroll up 2 </li>
<Li> JS text scroll up 3 </li>
<Li> JS text scroll up 4 </li>
<Li> JS text scroll up 5 </li>
<Li> JS text scroll up 6 </li>
<Li> JS text scroll up 7 </li>
</Ul>
</Div>
</Div>
The principle of this animation effect is to first scroll ul up to a li height, and then put the first li in ul at the end of ul, at this time, the original second li becomes the first li in ul, and then repeats the above action, so as to repeatedly implement uninterrupted rolling.

JS (jQuery) code:
Copy codeThe Code is as follows: function scrollTxt (){
Var controls = {},
Values = {},
T1 = 200,/* time when the animation is played */
T2 = 2000,/* playback interval */
Si;
Controls. rollWrap = $ ("# roll-wrap ");
Controls. rollWrapUl = controls. rollWrap. children ();
Controls. rollWrapLIs = controls. rollWrapUl. children ();
Values. liNums = controls. rollWrapLIs. length;
Values. liHeight = controls. rollWrapLIs. eq (0). height ();
Values. ulHeight = controls. rollWrap. height ();
This. init = function (){
AutoPlay ();
PausePlay ();
}
/* Scroll */
Function play (){
Controls. rollWrapUl. animate ({"margin-top": "-" + values. liHeight}, t1, function (){
Vertex (this).css ("margin-top", "0"). children (). eq (0). appendTo ($ (this ));
});
}
/* Auto scroll */
Function autoPlay (){
/* If the height of all li labels is greater than. roll-wrap, scroll */
If (values. liHeight * values. liNums> values. ulHeight ){
Si = setInterval (function (){
Play ();
}, T2 );
}
}
/* Pause scrolling when the mouse passes ul */
Function pausePlay (){
Controls. rollWrapUl. on ({
"Mouseenter": function (){
ClearInterval (si );
},
"Mouseleave": function (){
AutoPlay ();
}
});
}
}
New scrollTxt (). init ();

I hope this article will help you design javascript programs.