Jquery设置标题的自动翻转

我们平时在开发web程序的时候，想把一个新闻源滚动显示新闻的条目的标题及内容摘要，而且是每次一条，有点类似csdn的滚动广告。即一条新闻滚进视图之后，会暂停几秒钟，然后继续向上2滚动，淡出视图，同时，下一条新闻接着滚入视图。这次主要是用jquery来开发这个功能，里面肯定有许多不足之处，欢迎大家点评。

先粘贴一下代码，

     < style >
     <%--   #news-feed
         {
            padding :  0 ;
            margin :  0 0 0 10px ;
            position :  relative ;
            height :  200px ;
            width :  17em ;
            overflow :  hidden ;
         }
        .headline
         {
            position :  absolute ;
            height :  200px ;
            top :  210px ;
            overflow :  hidden ;
         } --%>
     </ style >
     < script  type ="text/javascript" >
         $(document).ready( function () {
           $( ' #news-feed ' ).each( function () {
              var  $container  =  $( this );
             $container.empty();
             $.get( ' feed.xml ' ,  function (data) {
               $( ' rss item ' , data).each( function () {
                  var  $link  =  $( ' <a></a> ' )
                   .attr( ' href ' , $( ' link ' ,  this ).text())
                   .text($( ' title ' ,  this ).text());
                  var  $headline  =  $( ' <h4></h4> ' ).append($link);
         
                  var  pubDate  =   new  Date($( ' pubDate ' ,  this ).text());
                  var  pubMonth  =  pubDate.getMonth()  +   1 ;
                  var  pubDay  =  pubDate.getDate(); 
                  var  pubYear  =  pubDate.getFullYear();
                  var  $publication  =  $( ' <div></div> ' )
                   .addClass( ' publication-date ' )
                   .text(pubMonth  +   ' / '   +  pubDay  +   ' / '   +  pubYear);
             
                  var  $summary  =  $( ' <div></div> ' )
                   .addClass( ' summary ' )
                   .html($( ' description ' ,  this ).text());
                 
                 $( ' <div></div> ' )
                   .addClass( ' headline ' )
                   .append($headline, $publication)
                   .appendTo($container);
               });
         
                var  currentHeadline  =   0 , oldHeadline  =   0 ;
                var  hiddenPosition  =  $container.height()  +   10 ;
               $( ' div.headline ' ).eq(currentHeadline).css( ' top ' ,  0 );
                var  headlineCount  =  $( ' div.headline ' ).length;
                var  pause;
         
                var  headlineRotate  =   function () {
                 currentHeadline  =  (oldHeadline  +   1 )  %  headlineCount;
                 $( ' div.headline ' ).eq(oldHeadline).animate(
                   {top:  - hiddenPosition},  ' slow ' ,  function () {
                     $( this ).css( ' top ' , hiddenPosition);
                   });
                 $( ' div.headline ' ).eq(currentHeadline).animate(
                   {top:  0 },  ' slow ' ,  function () {
                     pause  =  setTimeout(headlineRotate,  4000 );
                   });
                 oldHeadline  =  currentHeadline;
               };
               pause  =  setTimeout(headlineRotate,  4000 );
               
               $container.hover( function () {
                 clearTimeout(pause);
               },  function () {
                 pause  =  setTimeout(headlineRotate,  3000 );
               });
             });
           });
         });
     </ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div  id ="sidebar" >
         < h3 > Recent News </ h3 >
         < div  id ="news-feed" >
             < a  href ="###" > News Releases </ a >
         </ div >
     </ div >
     </ form >
</ body >

我们来庖丁解牛一下这些代码，首先来看样式，因为我们一次只显示一条新闻记录，所以，我们应该把高度也设为一条记录的，在这里设为200px，而且如果超了的话，我们就自动隐藏起来overflow=hidden。在这里，数据源我们用的是feed.xml，Jquery加载并读取xml文件是很简单的，可以参考上面的写法，通过读取xml文件，取出数据，进行组装，就得到了要显示的html代码段并附加到#container中，同时，在滚动显示中，我们需要设置两个变量，一个用于记录当前可见的标题，另一个用于记录刚刚滚动出视图的标题。并且让当前的记录显示在最上方，一定要注意的是，位置不能为static。最后，就是写一个函数，每次自动调用记录的显示。jquery还有很多的插件，可以更加简化这些操作，以后多学习了。如果想学习jquery，个人推荐jquery基础教程，jonathan chaffer编写的，很不错，很适合初学者，国内其他的人写的，里面就鱼龙混杂了。