js新闻滚动公告

<style>
    *{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li{
        height: 25px;
        line-height: 25px;
    }
    #three{
        margin: 30px auto;
        overflow: hidden;
        border: 1px solid blue;
        height: 127px;
        width: 200px;
    }
    #three ul{
        margin-top: 125px;
        width: 150px;
    }
</style>
    <div id="three">
        <ul>
            <li>asd</li>
            <li>dfg</li>
            <li>xz</li>
            <li>dfg</li>
            <li>q2</li>
            <li>xz</li>
            <li>asd</li>
            <li>dfg</li>
        </ul>
    </div>
<script src="jquery-1.7.2.min.js"></script>
<script>
    //滚动公告
    function dd(){
        //每一秒减去25px----->一个li的高度
        //linear----->滚动更加流畅
        $('#three ul').animate({marginTop:'-=25px'},1000,"linear",function(){
            var top = $('#three ul').attr('style');
            //当有一个li出去时改变top值并克隆第一个li在ul内部进行追加
            if(top=='margin-top: -25px;'){
                $('#three ul').attr('style','margin-top: 0px;')
                $("#three ul li:first").remove().clone(true).appendTo("#three ul");
            }
        });
    }
    var int = setInterval(dd,1000);
    $('#three').hover(function(){
        clearInterval(int);
    },function(){
        int = setInterval(dd,1000);
    });
</script>