2009年05月29日

News TickerをjQueryで

IDEA*IDEAの記事にあったのを見て、
jQueryの勉強がてらHow Toへ…。
GoogleのAjax APIを使ってフィードを拾うとこまで試しました。

これを応用した「その他」は以下に。
【その他1】Last.fm イベント情報ティッカー
【その他2】シンプルなニコ動ティッカーを作る
【その他3】jQueryで糞スレランキングティッカーを作る
【その他4】jQueryでニコニコ動画バーを作る

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      var first = 0;
      var speed = 700;
      var pause = 3000;

    function removeFirst() {
        first = $('ul#content li:first').html();
        $('ul#content li:first')
        .animate({opacity: 0}, speed)
        .fadeOut('slow', function() {$(this).remove();});
            addLast(first);
    }
    function addLast(first) {
        last = '<li style="display:none;">'+first+'</li>';
        $('ul#content').append(last)
        $('ul#content li:last')
        .animate({opacity: 1}, speed)
        .fadeIn('slow')
    }
    interval = setInterval(removeFirst, pause);
});

</script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したキー"></script>
<script type="text/javascript">

    google.load("feeds", "1");

    function feedLoaded(result) {
        if (!result.error) {
        var container = document.getElementById("content");
        container.innerHTML = '';

        for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var ul = document.createElement("ul");
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(entry.title));
        li.appendChild(document.createTextNode(entry.contentSnippet));
        container.appendChild(ul);
        container.appendChild(li);
    }
  }
}

    function OnLoad() {
          var feed = new google.feeds.Feed("http://rss.yomiuri.co.jp/f/yolranking30");
          feed.load(feedLoaded);
    }

    google.setOnLoadCallback(OnLoad);

</script>
<ul id="content"></ul>
にしてもGoogle Code Playgroundにある、
コレはかっこいいな〜…。


posted by garni at 04:19 | Comment(0) | TrackBack(0) | IT関連 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。