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">

CSS

Copy code 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;
/*Someone goes up from the background color Gradient transparent image*/ _display:none;/*Downgraded for IE6 experience*/}

JS

Copy code The code is as follows:

<script> <br>$(function(){ <br>msgmove(); <br>$("ul").hover(function( ){ <br>$(this).attr("name","hovered"); //After the mouse is set, the name value of ul is "hovered" <br>}, function(){ <br>$(this) .removeAttr("name"); <br>}); <br>}); <br>function msgmove(){ <br>var isIE=!!window.ActiveXObject; <br>var isIE6=isIE&&!window. XMLHttpRequest; <br>if($("ul").attr("name") != "hovered"){ <br>//Determine whether the name attribute of ul is "hovered" and decide whether the following code block runs. To pause scrolling when the mouse passes over it. <br>var height = $("li:last").height(); <br>if(isIE6){ <br>//Judge IE6, jQuery's animate animation and opacity transparency will appear in IE6 if used together Chinese ghosting phenomenon, <br>//So it is transparently disabled in ie6. <br>$("li:last").css({"height":0}); <br>}else{ <br>$("li:last").css({"opacity":0, "height":0}); <br>//The last li in the list is transparent and the height is set to 0 <br>} <br>$("li:first").before($("li:last")) ; <br>//Promote the last li of the list to the top to achieve infinite loop scrolling display of limited list items <br>$("li:first").animate({"height":height},300); <br>//The height of the li at the top of the list gradually becomes higher to push down the li below <br>if(!isIE6){ <br>$("li:first").animate({"opacity":"1"} ,300); <br>//Set transparent fade-in effect in non-IE6 browsers<br>} <br>} <br>setTimeout("msgmove()",5000); <br>//Set 5 seconds scrolling Once<br>} <br></script>