Daodaojs
很炫的一个跑马灯特效，判断容器内字数从而决定是直接垂直方向交替轮显还是水平滚动后再上下，从笨活儿博客扒下来的，大学里很油菜花的童鞋，佩服！
HTML部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="new2.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="new2.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(this).ready(
function(){
jQuery('#laodao li').eq(0).addClass('current');
jQuery('#laodao a').hover(function(){twiOver()},function(){twiOut()});
jQuery('#laodao .time').prettyDate();
setInterval(function(){ jQuery("a").prettyDate(); }, 5000);
if(jQuery('#laodao li.current pre')[0]){
twi_scroll();
}
}
);
</script>
<div style="width:700px;">
<div id="laodao" class="text-two-sides" >
<ul class="left">
<li>
<span class="time" title="Mon, 19 February 2011 03:36:55 +0000">01月10日</span>
<div class="content"><pre><a href="http://twitter.com/ktmud/statuses/24308678140100608" title="ktmud: 这个 @eztv_it 大爆发，一下发了好多种子……" target="_blank"> ktmud:这个 @eztv_it 大爆发，一下发了好多种子…… </a>
</pre>
</div>
</li>
<li>
<span class="time" title="Mon, 10 Jan 2011 03:34:58 +0000">01月10日</span>
<div class="content"><pre><a href="http://twitter.com/ktmud/statuses/24308190896201728" title="ktmud: @canglang 额。。。 也太简陋了吧" target="_blank"> ktmud: @canglang 额。。。 也太简陋了吧 </a>
</pre>
</div>
</li>
<li>
<span class="time" title="Sun, 09 Jan 2011 13:22:44 +0000">01月09日</span>
<div class="content"><pre><a href="http://twitter.com/ktmud/statuses/24093716989870080" title="ktmud: @ediyang 也欢迎研究我的 https://github.com/ktmud/vim-unix/blob/master/.vimrc" target="_blank"> ktmud: @ediyang 也欢迎研究我的 https://github.com/ktmud/vim-unix/blob/master/.vimrc </a>
</pre>
</div>
</li>
<li>
<span class="time" title="Sun, 09 Jan 2011 06:33:47 +0000">01月09日</span>
<div class="content"><pre><a href="http://twitter.com/ktmud/statuses/23990801096777729" title="ktmud: 泪奔~ 生的早不如生的巧 RT @jeffz_cn: 现在高考的人越来越少了，但是招生人数越来越多，说明现在的人高考比以前容易很多了。还有话说现在经济复苏了，各外企招人变多给钱也变多了，2011年毕业的人进公司的工资可能还比2010年进去且工作了一年的人还要多……" target="_blank"> ktmud:泪奔~生的早不如生的巧RT@jeffz_cn:现在高考的人越来越少了，但是招生人数越来越多，说明现在的人高考比以前容易很多了。还有话说现在经济复苏了，各外企招人变多给钱也变多了，2011年毕业的人进公司的工资可能还比2010年进去且工作了一年的人还要多…… </a>
</pre>
</div>
</li>
<li>
<span class="time" title="Sun, 09 Jan 2011 03:18:03 +0000">01月09日</span>
<div class="content"><pre><a href="http://twitter.com/ktmud/statuses/23941545514237953" title="ktmud: 淘宝招聘的时候应该加一条硬性标注，不会用支付宝的不招。" target="_blank"> ktmud: 淘宝招聘的时候应该加一条硬性标注，不会用支付宝的不招。 </a>
</pre>
</div>
</li>
</ul>
<p class="info"><a href="https://twitter.com/ktmud" title="我的Twitter页面" target="_blank"> follow me! </a></p>
</div>
</div>
</body>
</html>
Js实现
function prettyDate(_time){
var _date = new Date(_time),
diff = (((new Date()).getTime() - _date.getTime()) / 1000),
day_diff = Math.floor(diff / 86400);
if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
return;
return day_diff === 0 && (
diff < 60 && "刚刚发表" ||
diff < 120 && "1分钟前" ||
diff < 3600 && Math.floor( diff / 60 ) + " 分钟前" ||
diff < 7200 && "1 小时前" ||
diff < 86400 && Math.floor( diff / 3600 ) + " 小时前") ||
day_diff === 1 && "昨天" ||
day_diff < 7 && day_diff + " 天前" ||
day_diff < 31 && Math.ceil( day_diff / 7 ) + " 周前";
}
if ( typeof jQuery != "undefined" )
jQuery.fn.prettyDate = function(){
return this.each(function(){
var date = prettyDate(this.title);
if ( date )
jQuery(this).text( date );
});
};
function twi_scroll() {
_w1 = jQuery('#laodao li.current pre')[0].clientWidth;
_w2 = jQuery('#laodao li.current div.content')[0].clientWidth - 10;
if(_w1>_w2){
_duration = 200*(jQuery('#laodao li.current a').text().length - 30);
setTimeout('twi_go()',800);
}else{
tr_timeOut = setTimeout('twi_rotate()',4600);
}
}
function twi_go(){
try {
clearTimeout(tr_timeOut);
} catch(_e) {}
jQuery('#laodao li.current pre')
.animate({left: 0},800)
.animate({left: _w2-_w1},_duration,'linear')
.animate({left: _w2-_w1},800)
.animate({left: 0},(_duration+5000)/30,function(){});
tr_timeOut = setTimeout('twi_rotate()',2400+(_duration+3000)/30+_duration);
}
function twi_rotate(){
jQuery('#laodao pre').stop(true);
jQuery('#laodao li.current').next().addClass('current').prev().removeClass('current').animate({marginTop: -18},800,function(){ jQuery(this).css('marginTop','0').appendTo('#laodao ul'); jQuery('#laodao pre').css('left','0'); });
twi_scroll();
}
twiOver = function() {
try {
clearTimeout(tr_timeOut);
} catch(_e) {}
}
twiOut = function() {
tr_timeOut = setTimeout('twi_rotate()',800);
}
CSS部分
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, optgroup, button, p, blockquote, th, td, label, iframe {
margin: 0;
padding: 0;
}
html {
font:normal 14px "Helvetica", "Verdana", "Arial", "sans-serif";
color: #9cbbbc;
line-height:1em;
}
h1, h2, h3, h4, h5 {
border-bottom: 2px solid #314E5C;
color: #A1A386;
font: 20px "微软雅黑","黑体",Arial;
margin: 0.4em 0 0.6em;
padding: 0.2em 0;
}
ol, ul {
list-style: none outside none;
}
a {
color:#e3f6ff;
text-decoration:none;
font-size:1em;
}
a:visited {
color:#A1DBF5;
}
a:hover {
color:#fde8db;
text-decoration:underline;
}
a:active {
color:#fff3a6;
}
.hide {
display: none;
}
.text-two-sides {
text-align: right;
}
.text-two-sides .left {
float: left;
text-align: left;
}
#laodao {
background:url(http://b.a.yjc.me/wp-content/themes/blue-homing/i/bg-laodao.gif) no-repeat center center;
height:26px;
border-top:solid 2px #3a6477;
padding:12px 10px 2px 110px;
color:#697d87;
font-size:14px;
line-height:1.2em;
}
#laodao ul {
height:18px;
overflow:hidden;
width:475px;
position:relative;
}
#laodao ul li {
overflow:hidden;
height:18px;
position:relative;
}
#laodao span.time {
float:left;
}
#laodao div.content {
position:relative;
top:0;
left:10px;
height:18px;
overflow:hidden;
}
#laodao div.content pre {
position:absolute;
top:0;
}
#laodao a {
color:#8fb1c3;
}
.info {
font-size:12px;
}
效果见http://laotan.net微博