單行文字上翻滾

效果見圖：---》
html： 

<div class="news">
    <div class="t_news">
        <ul class="news_li">
            <li>1 我愛北京天安門</li>
            <li>2 我愛北京天安門</li>
            <li>3 我愛北京天安門</li>
            <li>4 我愛北京天安門</li>
            <li>5 我愛北京天安門</li>
        </ul>
        <ul class="swap"></ul>
    </div>
</div>

css

* {
	margin:0;
	padding:0;
}
li {
	list-style:none;
}
.news {
	height:35px;
	background:#fff;
	overflow:hidden;
}
.news .t_news {
	height:20px;
	color:#2a2a2a;
	margin-top:15px;
	overflow:hidden;
	position:relative;
	width:500px;
}
.news .news_li,.swap {
	line-height:20px;
	display:inline-block;
	position:absolute;
	top:0;
	right:0;
	font-size:14px;
	text-align:right;
	color:#585858
}
.news .swap {
	top:20px;
}

js

$('.swap').html($('.news_li').html());
x = $('.news_li');
y = $('.swap');
h = $('.news_li li').length * 20; //20爲每一個li的高度
var hh = $('.news_li li').length;
if (hh > 1)
    //setTimeout(b,3000);//滾動間隔時間 如今是3秒
    b();
b();

function b() {
    t = parseInt(x.css('top'));
    //alert(t)
    y.css('top', '20px');
    x.animate({
        top: t - 20 + 'px'
    }, 'slow'); //20爲每一個li的高度
    if (Math.abs(t) == h - 20) { //20爲每一個li的高度
        y.animate({
            top: '0px'
        }, 'slow');
        z = x;
        x = y;
        y = z;
    }
    setTimeout(b, 3000); //滾動間隔時間 如今是3秒
}