Content cycle scrolling small module based on jquery (imitation of Sina Weibo unlogged homepage scrolling Weibo display)_jquery

In terms of requirements, this function needs to call the latest Weibo data in real time. As far as front-end development is concerned, the requirements can be split as follows:
1 The content continues to scroll;
2 The new Weibo will include the following Weibo Push it down first, then fade in;
3 Pause scrolling when the mouse passes over the content;
4 The gradient at the bottom of the container disappears under the background color.
Among the above four requirements, requirements 1-3 are implemented by js technology, and requirement 4 is implemented by css technology. The requirements are discussed one by one below.
Requirements 1 and 2: The requirement for continuous scrolling of content is somewhat similar to the function introduced in the previous article "Small Module: Announcement Scroll and Pause". In that article, this function uses CSS positioning to control the entire Movement animation of ul list. Combined with requirement 2, we can write something simpler, insert the last li element above the first li element regularly, and then use the animate method to change the height and transparency of li. However, scrolling without pause still requires the setTimeout method. Achieve limited content loop scrolling when no new data is loaded.
Requirement 3: The requirement of pausing when the mouse hovers over can add the value of a certain attribute to an element when the mouse hovers over. The name attribute is used here to determine whether this value exists. If it exists, the code will not be executed.
Requirement 4: This can be achieved by overlaying gradient png24 images on the content. IE6 does not support png24 well. If performance needs to be considered, add the IE6 hack of display:none to this container. The next problem is to solve the problem of the image covering the text and how the text can be clicked or selected. At this time, a special css attribute "pointer-events" is needed. After the value of this attribute is set to none, the mouse can pass through An image positioned absolutely over text selects the text below it.
The comprehensive code is as follows:
HTML

Copy code The code is as follows:

< ;div class="messagewrap">