上下滾動播報特效

html：

<div style="height:50px;overflow:hidden;font-size: 14px;font-weight: bold;">
    <ul class="line">
        <li style="line-height:25px;">
            <span class="glyphicon glyphicon-hand-right"></span>
            <span style="color:red;">最新播報1</span>&nbsp;&nbsp;
            <span style="color:#5CB85C;">test1</span>
            <span class="glyphicon glyphicon-hand-right"></span>
            <span style="color:red;">最新播報2</span>&nbsp;&nbsp;
            <span style="color:#5CB85C;">test2</span>
            <span class="glyphicon glyphicon-hand-right"></span>
            <span style="color:red;">最新播報3</span>&nbsp;&nbsp;
            <span style="color:#5CB85C;">test3</span>
        </li>
    </ul>
</div>

script：

<script>
    $(function(){
        var _wrap=$('ul.line');
        var _interval=2000;
        var _moving;
        _wrap.hover(function(){
            clearInterval(_moving);
        },function(){
            _moving=setInterval(function(){
                var _field=_wrap.find('li:first');
                var _h=_field.height();
                _field.animate({marginTop:-_h+'px'},600,function(){
                    _field.css('marginTop',0).appendTo(_wrap);
                })
            },_interval);
        }).trigger('mouseleave');
    });
</script>