一个更精致的 Twitter 时间线

我非常享受生活中的美好事物。例如，如果我要吃牛排，我不想吃一些肥腻、低等级的肉。我更愿意（在这种情况下，花更多的钱）买 AAA 等级的肉。那样的味道是值得的。

同样的情况也适用于开发；Twitter 时间线是“不错的”，但我个人不喜欢线性、可滚动的推文展示方式！我想要 AAA 等级的，在这种情况下，只需要花费更多的时间，而不是金钱。正如你所见，我的推文每 7.5 秒滑动一次。当它循环显示最新的 10 条推文后，就会重新开始。

这部分最棒的是，实现起来并不复杂。事实上，Twitter 已经提供了一个简洁的 JSON 格式的推文数据 在这里。

我首先需要解析这些数据。所以我的第一个编程原则是，不要重复造轮子，肯定有人已经做过了。快速研究后，我找到了 TwitStream。他们的代码目标更侧重于 Twitter 搜索 API，而不是用户时间线，所以我需要进行一些修改。

完整的更新后的 twitStream.js 在这里

/*
* TwitStream - A jQuery plugin for the Twitter Search API
* Version 1.2
* http://kjc-designs.com/TwitStream
* Copyright (c) 2009 Noah Cooper
* Licensed under the GNU General Public License https://gnu.ac.cn/licenses/
*/
String.prototype.linkify=function(){
return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&;\?\/.=]+/g,function(m){
return m.link(m);
});
};
String.prototype.linkuser=function(){
return this.replace(/[@]+[A-Za-z0-9-_]+/g,function(u){
return u.link("http://twitter.com/"+u.replace("@",""));
});
};
String.prototype.linktag=function(){
return this.replace(/[]+[A-Za-z0-9-_]+/,function(t){
return t;
});
};

var showTweetLinks='none';
var width = $(window).width();

function fetch_tweets(elem){
elem=$(elem);
keyword=escape(elem.attr('title'));
num=elem.attr('class').split(' ').slice(-1);

var url="https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&
include_rts=true&screen_name="+keyword+"&count="+num+"&callback=?";
$.getJSON(url,function(json){
$(json).each(function(count){
var tTime=new Date(Date.parse(this.created_at));
var cTime=new Date();

var sinceMin=Math.round((cTime-tTime)/60000);
if(sinceMin==0){
var sinceSec=Math.round((cTime-tTime)/1000);
if(sinceSec<10)
var since='less than 10 seconds ago';
else if(sinceSec<20)
var since='less than 20 seconds ago';
else
var since='half a minute ago';
}
else if(sinceMin==1){
var sinceSec=Math.round((cTime-tTime)/1000);
if(sinceSec==30)
var since='half a minute ago';
else if(sinceSec<60)
var since='less than a minute ago';
else
var since='1 minute ago';
}
else if(sinceMin<45)
var since=sinceMin+' minutes ago';
else if(sinceMin>44&&sinceMin<60)
var since='about 1 hour ago';
else if(sinceMin<1440){
var sinceHr=Math.round(sinceMin/60);
if(sinceHr==1)
var since='about 1 hour ago';
else
var since='about '+sinceHr+' hours ago';
}
else if(sinceMin>1439&&sinceMin<2880)
var since='1 day ago';
else{
var sinceDay=Math.round(sinceMin/1440);
var since=sinceDay+' days ago';
}
var tweetBy='<a target="_blank" 
href="http://twitter.com/'+this.user.screen_name+'">@'+
this.user.screen_name+'</a> '+since;
if(showTweetLinks.indexOf('reply')!=-1)
tweetBy=tweetBy+' &middot; <a target="_blank" href="http://twitter.com/?status=@'+
this.user.screen_name+' &in_reply_to_status_id='+
this.id+'&in_reply_to='+this.user.screen_name+'">
Reply</a>';
if(showTweetLinks.indexOf('view')!=-1)
tweetBy=tweetBy+' &middot; <a target="_blank" href="http://twitter.com/'+
this.user.screen_name+'/statuses/'+this.id+'">View Tweet</a>';
if(showTweetLinks.indexOf('rt')!=-1)
tweetBy=tweetBy+' &middot; <a target="_blank" href="http://twitter.com/?status=RT @'+
this.user.screen_name+' '+escape(this.text.replace(/&quot;/g,
'"'))+'&in_reply_to_status_id='+
this.id+'&in_reply_to='+this.user.screen_name+'">RT</a>';
var tweet='<div';
tweet+=' style="left:'+(count * width)+'px"';
tweet+='>'+this.text.linkify().linkuser().linktag().replace(/<a/g,
'<a target="_blank"')+' '+
tweetBy+'</div>';
elem.append(tweet);
});
});
return(false);
}

$(function(){
showTweetLinks=showTweetLinks.toLowerCase();
if(showTweetLinks.indexOf('all')!=-1)
showTweetLinks='reply,view,rt';
$('.twitStream').each(function(){
fetch_tweets(this);
});
});

我只需要做一些细微的改动，首先当然是 URL，其次，推文发布者用户需要的 JSON 格式略有不同。

我还包含了代码，用于获取当前窗口的宽度，并将推文的 left 位置偏移，偏移量是计数器乘以宽度。当推文开始滑动时，这是必需的。

将此嵌入到我的网站所需的 HTML 代码如下

<div id="tweets" title="endyourif"></div>

如果需要嵌入多个时间线，该代码支持多个 twitStream 类。更新 title 以及 twitStream 类名旁边的计数，就是进一步自定义的全部内容。

最后，献上美味的肉（双关语）。下面是一个我创建的新函数，名为 cycle_tweets。它从一个定时器间隔每 XXXX 毫秒调用。

function cycle_tweets() {
var $children = $("#tweets").children();
var length = $children.length;

$children.each(function(count) {
var origLeft = parseInt($(this).css('left'));
var newLeft = origLeft - width;
$(this).animate({left: newLeft+'px'}, 1000);

// if we are the end and newLeft is 0, start again
if (count + 1 == length && newLeft == -width) {
$children.reverse().each(function(i) {
var theLeft = ((i-length+1)*-width);
$(this).animate({left: theLeft+'px'}, 500);
});
}
});
}

jQuery.fn.reverse = [].reverse;

上面的代码循环遍历 id 为 tweets 的子元素。它获取当前的 left 位置并计算一个新的 left 位置。使用新的 left 位置，该元素然后使用 Jquery Animate 进行动画处理。

一旦我们通过所有子元素进行动画处理，我就会检查是否已经显示了所有推文。如果是，则反转子元素并将其动画回到原始起始位置，以重新开始循环。

最后需要进行一个更改，当推文获取完成后，需要调用 cycle_tweets 函数。

$('.twitStream').each(function(){
fetch_tweets(this);
// cycle through the tweets
setInterval(function() {cycle_tweets(this); }, 7500);
});

这是之前代码的一个子集，在 fetch_tweets 函数调用之后，使用 setInterval 创建一个新的间隔，每 7500 毫秒或 7.5 秒调用 cycle_tweets。

正如我之前所说，我不是设计师，所以样式设计就交给你了！