Jquery实现的单条新闻竖向滚动

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
< html  xmlns ="http://www.w3.org/1999/xhtml" >  
< head >  
< meta  http-equiv ="Content-Type"  c  />  
< title > 无标题文档 </ title >  
< style  type ="text/css" >  
ul,li { margin : 0 ; padding : 0 }
#scrollDiv { width : 300px ; height : 25px ; line-height : 25px ; border : #ccc 1px solid ; overflow : hidden }
#scrollDiv li { height : 25px ; padding-left : 10px ; }
</ style >  
< script  src ="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"  type ="text/javascript" ></ script >  
< script  type ="text/javascript" >  
function  AutoScroll(obj){
        $(obj).find( " ul:first " ).animate({
                marginTop: " -25px "
        }, 500 , function (){
                $( this ).css({marginTop: " 0px " }).find( " li:first " ).appendTo( this );
        });
}
$(document).ready( function (){
setInterval( ' AutoScroll("#scrollDiv") ' , 1000 )
});
</ script >  
</ head >  
 
< body >  
< div  id ="scrollDiv" >  
   < ul >  
     < li > 这是公告标题的第一行 </ li >  
     < li > 这是公告标题的第二行 </ li >  
     < li > 这是公告标题的第三行 </ li >  
     < li > 这是公告标题的第四行 </ li >  
     < li > 这是公告标题的第五行 </ li >  
     < li > 这是公告标题的第六行 </ li >  
     < li > 这是公告标题的第七行 </ li >  
     < li > 这是公告标题的第八行 </ li >  
   </ ul >  
</ div >  
</ body >  
</ html >

 

Demo下载：/Files/kuibono/jQuery-scrollnews.rar

转载于:https://www.cnblogs.com/kuibono/articles/1620415.html