首頁 > 其他

jquery實現標題的自動翻轉功能

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
時間:2009-10-3 20:57:25 來源:www.cnblogs.com
作者:

本次使用Jquery實現一條新聞滾進視圖之後，會暫停幾秒鐘，然後繼續向上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。最後，就是寫一個函數，每次自動調用記錄的顯示。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More