水平滚动推文

时间:2012-10-29 14:30:13

标签: jquery html scroll tweets

我正在尝试在我的网站顶部集成一个滚动的推文栏,到目前为止,我已经按照几个教程,似乎都遵循相同的材料,但我无法让它工作。

设施出现了什么,但只是说“正在加载”我认为我已经将所有代码设置正确,但我可能会遗漏一些东西,有人可以提供正确的方向吗? :)

这是Feed的标题代码:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
  <script src='js/jquery.marquee.js'></script> 
  <script type='text/javascript'>
      //<![CDATA[ 
   var Twitter = {
    init: function () {
     // Pass in the username you want to display feeds for
   this.insertLatestTweets('GumBumRadio');
    }, 

    // This replaces the <p>Loading...</p> with the tweets
    insertLatestTweets: function (username) {
     var limit = 5; // How many feeds do you want?
     var url  = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=GumBumRadio' + username + '&count=' + limit + '&callback=?';

     // Now ajax in the feeds from twitter.com
     $.getJSON(url, function (data) {
      // We'll start by creating a normal marquee-element for the tweets
      var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';

      // Loop through all the tweets and create a link for each
      for (var i in data) {
       html += '<a href="http://twitter.com/' + username + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
      }

      html += '</marquee>';

      // Now replace the <p> with our <marquee>-element
      $('#twitter p').replaceWith(html);

      // The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
      Twitter.fancyMarquee();
     });
    }, 

    // Replaces the marquee-element with a fancy one
    fancyMarquee: function () {
     // Replace the marquee and do some fancy stuff (taken from remy sharp's website)
     $('#twitter marquee').marquee('pointer')
      .mouseover(function () {
       $(this).trigger('stop');
      })
      .mouseout(function () {
       $(this).trigger('start');
      })
      .mousemove(function (event) {
       if ($(this).data('drag') == true) {
        this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
       }
      })
      .mousedown(function (event) {
       $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
      })
      .mouseup(function () {
       $(this).data('drag', false);
      });
    }, 

    // Takes a date and return the number of days it's been since said date
    daysAgo: function (date) {
     // TODO: Fix date for IE...
     if ($.browser.msie) {
      return '1 day ago';
     }

     var d = new Date(date).getTime();
     var n = new Date().getTime();

     var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
     var daysAgo = numDays + ' days ago';

     if (numDays == 0) {
      daysAgo = 'today';
     }
     else if (numDays == 2) {
      daysAgo = numDays + ' day ago';
     }

     return daysAgo;
    }
   };

   Twitter.init();
   //]]>
    </script>

1 个答案:

答案 0 :(得分:0)

生成的twitter链接似乎有问题。在我的浏览器中它要求:

http://api.twitter.com/1/statuses/user_timeline.json?screen_name=?GumBumRadio&count=5&callback=jQuery16106500070334877819_1351522993556&_=1351522993562

返回

jquery16106500070334877819_1351522993556({"errors":[{"message":"Sorry, that page does not exist","code":34}]});

编辑:

是吗?在screen_name变量中标记。您还要在变量中包含用户名GumBumRadio,该变量也会在URL链接中进行硬编码。