Vanessa

大前端的点滴生活

jquery 实现标题的自动翻转功能





时间: 2009-10-3 20:57:25 来源:www.cnblogs.com
作者:




本次使用 Jquery 实现一条新闻滚进视图之后,会暂停几秒钟,然后继续向上 2 滚动,淡出视图,同时,下一条新闻接着滚入视图。这次主要是用 jquery 来开发这个功能.




     <%--   #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;

        }--%>

   

   

         $(document).ready(function() {

           $('#news-feed').each(function() {

             var $container = $(this);

             $container.empty();

             $.get('feed.xml', function(data) {

               $('rss item', data).each(function() {

                 var $link = $('')

                   .attr('href', $('link', this).text())

                   .text($('title', this).text());

                 var $headline = $('

').append($link);

        

                 var pubDate = new Date($('pubDate', this).text());

                 var pubMonth = pubDate.getMonth() + 1;

                 var pubDay = pubDate.getDate();

                 var pubYear = pubDate.getFullYear();

                 var $publication = $('
')

                   .addClass('publication-date')

                   .text(pubMonth +'/'+ pubDay +'/'+ pubYear);

            

                 var $summary = $('
')

                   .addClass('summary')

                   .html($('description', this).text());

                

                 $('
')

                   .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);

               });

             });

           });

         });

   





   

   

       

Recent News



       


            News Releases

       

   

   


我们来庖丁解牛一下这些代码,首先来看样式,因为我们一次只显示一条新闻记录,所以,我们应该把高度也设为一条记录的,在这里设为 200px,而且
如果超了的话,我们就自动隐藏起来 overflow=hidden。在这里,数据源我们用的是 feed.xml,Jquery 加载并读取 xml 文件是很简
单的,可以参考上面的写法,通过读取 xml 文件,取出数据,进行组装,就得到了要显示的 html 代码段并附加到 #container 中,同时,在滚动显示
中,我们需要设置两个变量,一个用于记录当前可见的标题,另一个用于记录刚刚滚动出视图的标题。并且让当前的记录显示在最上方,一定要注意的是,位置不能
为 static。最后,就是写一个函数,每次自动调用记录的显示。



欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步