ニコニコ動画 APIとjQueryを使用した、
サイトURLからRSS出力したフィードを順次表示するシンプルなニコニコ動画ティッカー・その2です。(単独デモ
横バージョンの単独デモはこちら(IEだと表示に不具合あり。調整中…)

ソース及びproxy.phpはjFeedを参考に使用させて頂きました。
jQueryの描画部分については前回に続き、再びこちらのサイトを参考にさせていただきました。

処理の詳細は上記の単独デモページからご確認ください。

※ 上へ滑り込み&フェードアウトの処理

$(document).ready(function(){

    var first = 0;
    var speed = 1600;
    var pause = 12000;

        function removeFirst(){
            first = $('ul#listticker li:first').html();

            $('ul#listticker li:first')
            .animate({height: 'toggle', opacity: 'toggle'}, 'slow', function() {$(this).remove();});
            addLast(first);
        }

        function addLast(first){
            last = '<li style="display:none;">'+first+'</li>';
            $('ul#listticker').append(last)
            $('ul#listticker li:last')
            .animate({height: 'toggle', opacity: 'toggle'}, speed)
            .fadeIn('slow')
        }

    interval = setInterval(removeFirst, pause);
});

※ jFeedによるRSSの処理

jQuery(function() {

    var feedsUrls = ['./php/proxy.php?url=http://www.nicovideo.jp/ranking/mylist/weekly/all?rss=2.0',
                     './php/proxy.php?url=http://www.nicovideo.jp/recent?rss=2.0',
                     './php/proxy.php?url=http://www.nicovideo.jp/newarrival?rss=2.0'];
    var r = Math.floor(Math.random()*3);
    jQuery.getFeed({ url: feedsUrls[r], success: function(feed) {
            var html = '';
                html += '<p class="bartitle">' + feed.title.slice(0, -11) + '</p>';

            for(var i = 0; i < 10; i++) {
                var item = feed.items[i];

                if (item.title.length > 12) item.title = item.title.slice(0,12) + '..'
                html += '<li>' + item.description + '<a href="' + item.link + '">' + item.title + '</a>' + '</li>';
            }
                jQuery('#listticker').append(html);
        }
    });
});

戻ります