Jquery应用案例之单条新闻的滚动效果(仿雅虎首页新闻滚动）

 

Jquery应用案例之单条新闻的滚动效果(仿雅虎首页新闻滚动）

代码如下：

头部分代码：

< html >< head >
< title > 单条新闻滚动效果 </ title >

< script  type ="text/javascript"  src ="scripts/jquery.js" ></ script >
< script  type ="text/javascript"  src ="scripts/interface.js" ></ script >

jquery代码部分：

< script type  =   " text/javascript " >
         var  n = 0 ;  
         var  m = 0  
         function  lie() {
          
             $(function(){
                            
                            var $firstNode = $('#lie>p'); 
                
                            $firstNode.eq(n).removeAttr("display");          
                            $firstNode.eq(n).fadeOut('slow',function(){  
                        
                            $firstNode.eq(n+1).fadeIn("slow"); 
                             m++;
                            if(m>=$("p").length)
                            {
                             n=0;
                             m=0
                            }
                            else
                            {
                            n++;
                            
                            }            
                      
                            });
              });
       }
       setInterval('lie()', 3000 );
</ script >

ＨＴＭＬ代码部分：

< body >
        < div  id ="lie"   >
               < p  style ="display:none" > 1、通知说，近期我国居民消费价格总水平出现明显上涨 </ p >
               < p  style ="display:none" > 2、各地区、各部门必须清醒地认识到形势的严峻性。 </ p >
               < p  style ="display:none" > 3、一是切实抓好秋粮生产。秋粮是粮食生产的大头. </ p >
               < p  style ="display:none" > 4、付尚未下拨的财政支农资金，各地要及时兑现给种粮农民. </ p >
               < p  style ="display:none" > 5、付尚未下拨的财政支农资金，各地要及时兑现给种粮农民. </ p >
               < p  style ="display:none" > 6、收购价政策。继续稳妥地推动农业保险保费补贴试点工作. </ p >       
               < p  style ="display:none" > 7、二是认真落实扶持生猪生产的各项政策措施。目前中央财政已下拨. </ p >
        </ div >
</ body >

分类:  AJAX学习