javascriptについての質問です。

twitterのサイドバーウィジェットみたいな、最近のツイートがアニメーションで1つずつ表示されて流れていくアレの作り方orサンプルスクリプトのご紹介をお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/11/01 15:15:48
  • 終了:2011/11/08 15:20:03

回答(2件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/11/01 17:25:30

ポイント50pt

jQueryを使ってざっくり。

DEMO:

http://jsfiddle.net/cherenkov/P8QwH/


<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function() {
  $.getJSON('http://api.twitter.com/1/statuses/user_timeline/hatenaquestion.json?callback=?', function(json) {
    json.reverse().forEach(function(obj, i) {
      var screenName = obj.user.screen_name;
      var text = obj.text;
      var tweet = $('<div class="tweet">').text(screenName + ':' + text)
        .css({'width':'200px','border':'1px solid skyblue', 'font-size':'12px', 'display':'none'});
      setTimeout(function() {
        $('#tw_widget').prepend(tweet);
        tweet.fadeIn(300);
      }, ++i*1000);
    });
  });
});
</script>
</head>
<body>
<div id="tw_widget"></div>
</body>
</html>


関連:

Twitterのタイムラインを表示するウィジェットのような動作をす.. - 人力検索はてな

id:kodairabase No.2

kodairabase回答回数661ベストアンサー獲得回数802011/11/07 20:09:15

ポイント50pt

jqueryでtwitterのタイムラインをカンタン表示!

http://d.hatena.ne.jp/tageo/20110202/1296618682

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません