5、微博相对时间
现在，基本实现了jquery.weibo.search.js插件了，但我们发现每条微博显示时间好像不太正常，而且还没有实现滚动（animate）和淡入（fadeIn）效果。
由于微博是使用相对时间来表示微博插件时间，当然我们也可以显示具体时间，接下来，让我们把微博创建时间（created_at）转化为相对时间的形式，由于微博的时间格式为：“Thu Feb 14 20:33:30 +0800 2013”，所以我们定义了方法relativeTime()把微博时间转换为相对时间。
function relativeTime(dateString) { var values = dateString.split(" "); dateString = values[1] + " " + values[2] + ", " + values[5] + " " + values[3]; var parsed_date = Date.parse(dateString); var relative_to = (arguments.length > 1) ? arguments[1] : new Date(); var delta = parseInt((relative_to.getTime() - parsed_date) / 1000); delta = delta + (relative_to.getTimezoneOffset() * 60); if (delta < 60) { return 'just now'; } else if (delta < 120) { return 'a minute ago'; } else if (delta < (60 * 60)) { return (parseInt(delta / 60)).toString() + ' minutes ago'; } else if (delta < (120 * 60)) { return 'about an hour ago'; } else if (delta < (24 * 60 * 60)) { return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago'; } else if (delta < (48 * 60 * 60)) { return '1 day ago'; } else { return (parseInt(delta / 86400)).toString() + ' days ago'; } }
上面，我们定义了方法relativeTime()，首先它通过拼接方式转换时间格式为“Feb 14, 2013 20:33:30”，然后把dateString转换为Date，接着获取当前时间减去微博时间（created_at）计算出相对时间（delta）。
图8 relativeTime计算相对时间
5、微博动态效果
上面，我们通过方法relativeTime()把微博的时间转换为相对时间，接下来，我们需要实现微博的滚动（animate）和淡入（fadeIn）效果。
在新浪微博大厅里，我们可以看到“大家正在说”中每条微博由上往下地滚动着，其实要实现该滚动效果我们可以使用jQuery的animate()方法，具体实现如下：
/** * Weibos rolling from top to bottom */ function weiboIn() { if (paused || grabbing) { setTimeout(weiboIn, 500); return; } // Gets last element. var h, $el = $cont.children(':last'), $elFirst = $cont.children(':first'); // Gets last weibo item height. h = $el.outerHeight(); // Animate: increases the first weibo item margin top to 'h'. // Then decreases the first weibo item margin top to '0'. $elFirst.animate({ marginTop: h }, opts.animInSpeed, function() { $elFirst.css({ marginTop: 0, opacity: 1 }); /*@cc_on try { el.style.removeAttribute('filter'); } // ie cleartype fix catch (smother) { } @*/ // append the last weibo item first. $el.css(opts.css['tweet']).hide().prependTo($cont); // Fade in display new item. $el.fadeIn(opts.animInSpeed); // Loop setTimeout(grabFlag ? grabWeibos : weiboIn, opts.timeout); }); }
上面，我们定义了weiboIn()方法，它实现微博由上往下滚动显示效果，我们通过animate()方法动态地修改div元素的marginTop属性。
接着，我们需要把滚动到最后的微博重新插入到当前第一条微博上，然后通过fadeIn()函数实现微博淡入显示。
现在，我们基本实现了微博“大家正在说”的向下滚动和淡入效果了，我们先用animate()方法修改div元素的marginTop属性，然后通过淡入方式显示滚动下来的微博。
也许有人会问：“如果要实现向上滚动和淡出效果呢”？其实，该效果和我们之前实现的效果恰好相反，首先需要淡出隐藏微博，然后向上滚动。
现在，我们已经有实现的思路了，那么接下来让我们实现向上滚动和淡出效果吧！具体实现如下：
/** * Weibos rolling from bottom to top. */ function weiboOut() { if (paused || grabbing) { setTimeout(weiboOut, 500); return; } // Gets last element. var h, $el = $cont.children(':first'), el = $el[0]; // Implements fade out effect. $el.animate(opts.animOut, opts.animOutSpeed, function() { // Gets first weibo item height. h = $el.outerHeight(); $el.animate({ marginTop: -h }, opts.animInSpeed, function() { $el.css({ marginTop: 0, opacity: 1 }); /*@cc_on try { el.style.removeAttribute('filter'); } // ie cleartype fix catch (smother) { } @*/ // append the last weibo item last. $el.css(opts.css['tweet']).show().appendTo($cont); setTimeout(grabFlag ? grabWeibos : weiboOut, opts.timeout); }); }); }