Example of jquery text vertical scrolling code and jquery scrolling code

Example of jquery text vertical scrolling code and jquery scrolling code

Jquery text vertical scroll code example:

Vertical text scrolling is applicable to a large number of websites, especially in functional structures such as news announcements or news lists.

The code example is as follows:

<! DOCTYPE html> 
The code above enables vertical and vertical scrolling of text with intermittent scrolling. The following describes the implementation process:
I. Implementation principle:
There is a time interval for upward scrolling because the setTimeout () function is used for recursive calling, and function B () is called three seconds later (). Function B () defines the motion rule, copies the content in news_li and places it in swap. Then, it continuously sets the top attribute value of news_li, which forms a rolling operation, after all the news_li elements are rolled up, news_li is connected to avoid a rolling fault. Then, the value of y is assigned to x, in this way, news_li is implemented for a new round of rolling operations, so as to achieve uninterrupted rolling operations.
Ii. Code comments:
1. function B () {}, CREATE function B, which defines the rolling rule.
2.t=parseInt(x.css ('top') to obtain the top attribute value of x, that is, the top attribute value of news_li.
3.y.css ('top', '19px '). Set the top attribute value of y to 19px. Note that the height of each li element is 19px, which is critical.
4. x. animate ({top: t-19 + 'px '}, 'low'), and roll x to '19px in an animation.
5. if (Math. abs (t) = h-19) {}, used to determine whether the x element, that is, news_li, has another li not finished rolling.
6. y. animate ({top: '0px '}, 'low'), and set the top attribute value of y, that is, swap, to 0px.
7. z = x, x = y, y = z, to transfer a series of values, the ultimate goal is to replace the content in x with y.
8. setTimeout (B, 3000), which uses Recursion to call function B.
9. $ (document). ready (function () {}, the document structure is fully loaded and then the code in the function is executed.
10.20.('.swap'0000.html(('.news_li'0000.html (), assign the content in news_li to swap.
11. x = $ ('. news_li'), get the x = $ ('. news_li') object.
12. y = $ ('. swap') to obtain the swap object.
13. h = $ ('. news_li li'). length * 19. multiply the number of news lines by 19, and 19 is the height of li.
14. setTimeout (B, 3000), call function B 3 seconds later.