HTML Announcement Scrolling __html

<div id= "News" > 
<ul> 
<li><a href= "#" title= "AAAAAAAAAAAAAAA" >aaaaaaaaaaaaaaa</ a></li> 
<li><a href= "#" title= "BBBBBBBBBBBBBBB" >bbbbbbbbbbbbbbb</a></li> 
<li><a href= "#" title= "CCCCCCCCCCCCCCC" >ccccccccccccccc</a></li> 
<li>< A href= "#" title= "ddddddddddddddd" >ddddddddddddddd</a></li> 
<li><a href= "#" title= " Eeeeeeeeeeeeeee ">eeeeeeeeeeeeeee</a></li> 
<li><a href=" # "title=" FFFFFFFFFFFFFFF " >fffffffffffffff</a></li> 
<li><a href= "#" title= "GGGGGGGGGGGGGGG" >ggggggggggggggg </a></li> 
</ul> 

Ui,li { 
list-style:none; 
} 
#news { 
height:75px; 
Overflow:hidden; 

$ (function () { 
var $this = $ ("#news"); 
var Scrolltimer; 
$this. Hover (function () { 
clearinterval (scrolltimer); 
}, Function () { 
Scrolltimer = setinterval (function () { 
scrollnews ($this); 
};} 
). Trigger ("MouseLeave"); 

function Scrollnews (obj) { 
var $self = obj.find ("ul"); 
var lineheight = $self. Find ("Li:first"). Height (); 
$self. Animate ({ 
"margintop":-lineheight + "px" 
}, and function () { 
$self. css ({ 
margintop:0 
}). Find ("Li:first"). Appendto ($self); 
}) 
} 

The main is to hover, setinterval, clearinterval, animate these methods as well as margintop attributes (MarginLeft, top, left, etc.) understanding and application, need to pay attention to, if not add. Trigger ("MouseLeave"), the list does not scroll when the page is initialized, and appendto can move elements directly, that's all.