JS & jquery seamlessly scroll up and down applications (single or multiple rows)

In my project, it is not difficult to implement the JS Library Based on jquery to implement the seamless scrolling effect of the user information stream list.

1. html

<Div class = "scrolldiv"> <ul class = "mulitline"> <li> This is the first line of the announcement title </LI> <li> This is the second line of the announcement title </LI> <li> This is the third line of the announcement title </LI> <li> This is the fourth line of the announcement title </LI> <li> This is the fifth line of the announcement title </ LI> <li> This is the sixth line of the announcement title </LI> <li> This is the seventh line of the announcement title </LI> <li> This is the eighth line of the announcement title </Li> </ul> </div>

 

2. CSS Definition

.scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;overflow:hidden}.scrollDiv li{height:25px;line-height:25px;}

3. js Core Implementation

$ (Function () {// VaR _ wrap for a single row application = $ ('ul. line '); // defines the rolling area VaR _ interval = 2000; // defines the rolling gap time VaR _ moving; // specifies the animation _ wrap to be cleared. hover (function () {clearinterval (_ moving); // when the mouse is in the scroll area, stop scrolling}, function () {_ moving = setinterval (function () {VaR _ field = _ wrap. find ('li: First '); // This variable cannot be placed at the start of the function. The value of Li: First is the variable VAR _ H = _ field. height (); // get the scroll height _ field each time. animate ({margintop:-_ H + 'px '}, 600, function () {// hide the first line of _field.css ('margintop ', 0 ). appendto (_ wrap); // after hiding, set the margin value of the row to zero and insert it to the end for seamless scrolling})}, _ interval) // The interval of scrolling depends on _ interval }). trigger ('mouseleave '); // when the function is loaded, simulate the execution of mouseleave, that is, automatic scrolling}); $ (function () {// multiline application VaR _ wrap =$ ('ul. mulitline'); // defines the rolling area VaR _ interval = 3000; // defines the rolling gap time VaR _ moving; // specifies the animation _ wrap to be cleared. hover (function () {clearinterval (_ moving); // when the mouse is in the scroll area, stop scrolling}, function () {_ moving = setinterval (function () {VaR _ field = _ wrap. find ('li: First '); // This variable cannot be placed at the start of the function. The value of Li: First is the variable VAR _ H = _ field. height (); // get the scroll height _ field each time. animate ({margintop:-_ H + 'px '}, 600, function () {// hide the first line of _field.css ('margintop ', 0 ). appendto (_ wrap); // after hiding, set the margin value of the row to zero and insert it to the end for seamless scrolling})}, _ interval) // The interval of scrolling depends on _ interval }). trigger ('mouseleave '); // when the function is loaded, simulate the execution of mouseleave, that is, automatic scrolling });

Key Point: CSS defines the width and height of the container & defines the line height of Li