html+js实现跑马灯效果

[TOC]

1, html

<div id="nav" style="height:20px;overflow:hidden;">
        <ul>
            <li style="height:20px">第一条</li>
            <li style="height:20px">第二条</li>
        </ul>
    </div>

2, js

setInterval(function() {
            $("#nav").find("ul").animate({"marginTop":"-20px"},200,function() {
                $(this).css({'marginTop':'0px'}).find("li:first").appendTo(this)
            })
        },2000)