Jquery-based content-loop scrolling Small Module (like Sina Weibo's non-Logon homepage rolling Weibo display) _ jquery

Sina Weibo has not logged on to the homepage. There is a "everyone talking" module that dynamically rolls through the latest Weibo posts. In terms of demand, this function requires real-time calling of the latest Weibo data. For frontend development alone, the requirements can be split as follows:
1. Continuous content scrolling;
2. The new Weibo posts the following Weibo posts first and then fades in;
3. Move the mouse over the content to pause scrolling;
4. the gradient at the bottom of the container disappears under the background color.
Among the above four requirements, 1-3 is js technology implementation, and 4 is css technology implementation. The requirements are described one by one below.
Requirement 1 and requirement 2: the requirement for continuous Content Rolling is similar to the function described in the previous article "Small Module: Rolling announcement and suspension". In that article, this function uses the position of css to control the movement animation of the entire ul list. In combination with requirement 2, we can write more simply, so that the final li element is inserted at the top of the first li element at regular intervals, and then the animate method is used to change the height and transparency of li. The setTimeout method is still used for non-Pause scrolling. When no new data is loaded, the limited content must be rolled cyclically.
Requirement 3: When the mouse is paused, you can add a property value to an element when the mouse hover is passed. Here, the name attribute is used to determine whether the value exists, if yes, no code is executed.
Requirement 4: You can achieve this by overwriting the gradient png24 image on the content. IE6 does not support png24 well. If you need to consider the performance, add the IE6hack of display: none to the container. The next problem is to solve the problem of how the text can be clicked or selected when the image overwrites the text. In this case, a special css attribute "pointer-events" is required ", after the value of this attribute is set to none, you can select the following text through the absolute positioning image on the text.
The Code is as follows:
HTML

The Code is as follows:

CSS

The Code is as follows:

. Messagewrap {overflow: hidden; position: relative; width: 500px; height: 300px}
Li {height: 50px ;}
. Bottomcover {width: 500px; height: 45px; position: absolute; bottom: 0; left: 0;
Pointer-events: none; background: url(halftransp.png) left bottom no-repeat;
/* A transparent image with a gradient from the background color */_ display: none;/* experience downgrade for IE6 */}

JS

The Code is as follows:

Script
$ (Function (){
Msgmove ();
$ ("Ul"). hover (function (){
$ (This). attr ("name", "hovered"); // set the ul name to "hovered"
}, Function (){
$ (This). removeAttr ("name ");
});
});
Function msgmove (){
Var isIE = !! Window. ActiveXObject;
Var isIE6 = isIE &&! Window. XMLHttpRequest;
If ($ ("ul"). attr ("name ")! = "Hovered "){
// Determine whether the ul name attribute is "hovered" and whether the following code block is running to pause the scroll of the mouse.
Var height = $ ("li: last"). height ();
If (isIE6 ){
// Judge IE6. When jQuery's animate animation and opacity are used transparently together, a Chinese shadow occurs in IE6,
// Disable it transparently in ie6.
$ ("Li: last" ).css ({"height": 0 });
} Else {
$ ("Li: last" 2.16.css ({"opacity": 0, "height": 0 });
// Set the li transparency and height at the end of the list to 0.
}
$ ("Li: first"). before ($ ("li: last "));
// Raise the last li in the list to the top to display the limited list items in an infinite loop
$ ("Li: first"). animate ({"height": height}, 300 );
// The li height at the top of the list gradually increases to push down the following li
If (! IsIE6 ){
$ ("Li: first"). animate ({"opacity": "1"}, 300 );
// Set the transparent fade-in effect in a non-IE6 Browser
}
}
SetTimeout ("msgmoving ()", 5000 );
// Set to scroll once every 5 seconds
}
Script