Original news screen scrolling Effect

 

 

<Div class = "w1000">
<Ul class = "interactlist" id = "Container">
</Ul>
<SCRIPT type = "ctemplate" id = "information" style = "display: none">
<Li class = "{$ changeclass (@ index)}">
<Div class = "margin-b10 fontb">
{$ Showinfo (@ dusername, @ ndusername, @ isquestion )}
</Div>
<Div class = "cfix">
<Div class = "float-l inlisthend">
<Div class = "imgbor">
</div>
</Div>
<Div class = "float-l cfix">
<Div class = "inlistfont">
{@ Xcontext}
</Div>
<Div class = "inlistdata margin-t10 colorgray">
<Font >{@ fromorg} </font> <font class = "data" >{@ createtime} </font>
</Div>
</Div>
</Div>
</LI>
</SCRIPT>
</Div>

<SCRIPT type = "text/JavaScript">

$ (Document). Ready (function (){

VaR $ ul = $ ("# container ");
VaR scrtime;
// Initialize container styles and events
$Ul.css ({
'Overflow': 'ddn'
}). Hover (function (){
// Stop scrolling when the mouse enters
Clearinterval (scrtime );
}, Function (){
// Move the mouse away and start rolling again
Scrtime = setinterval (function (){
VaR liheight = $ ul. Find ("Li: Last"). Height ();
$ Ul. animate ({margintop: liheight + 34}, 3000, function (){
$ Ul. Find ("Li: Last"). prependto ($ UL );
$ Ul. Find ("Li: First"). Hide ();
$Ul.css ({margintop:-25 });
$ Ul. Find ("Li: First"). fadein (3000 );
});
},6000 );
}). Trigger ('mouseleave ');

});

</SCRIPT>

 

Note: container is the data source container, which is obtained based on the actual project data source. Margin-top:-25 is obtained based on the margin-top of the UL container of container, while margintop: the 34 pixels in liheight + 34 are the height between Li and Li!