WEB开发网
开发学院网页设计JavaScript Jquery设置标题的自动翻转 阅读

Jquery设置标题的自动翻转

 2009-10-08 00:00:00 来源:WEB开发网   
核心提示:我们平时在开发web程序的时候,想把一个新闻源滚动显示新闻的条目的标题及内容摘要,Jquery设置标题的自动翻转,而且是每次一条,有点类似csdn的滚动广告,里面肯定有许多不足之处,欢迎大家点评,即一条新闻滚进视图之后,会暂停几秒钟

我们平时在开发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>

1 2  下一页

Tags:Jquery 设置 标题

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接