列表文字滚动

文字滚动

//html 结构
<div class="tabBox">
    <ul class="visiter">
        <li><span class="firstSpan">第一周幸运用户</span><span>18601583176</span><span>巴西世界杯之旅6日游</span></li>
        <li><span class="firstSpan">第二周幸运用户</span><span>18601583176</span><span>巴西世界杯之旅6日游</span></li>
        <li><span class="firstSpan">第三周幸运用户</span><span>18601583176</span><span>巴西世界杯之旅6日游</span></li>
        <li><span class="firstSpan">第四周幸运用户</span><span>18601583176</span><span>巴西世界杯之旅6日游</span></li>
        <li><span class="firstSpan">第五周幸运用户</span><span>18601583176</span><span>巴西世界杯之旅6日游</span></li>
        <li><span class="firstSpan">第六周幸运用户</span><span>18601583176</span><span>巴西世界杯之旅6日游</span></li>
        <li><span class="firstSpan">第七周幸运用户</span><span>18601583176</span><span>巴西世界杯之旅6日游</span></li>
        <li><span class="firstSpan">第八周幸运用户</span><span>18601583176</span><span>巴西世界杯之旅6日游</span></li>
    </ul>
</div>

//js代发
$(function(){
    var _listName = $('.visiter');
    var _geshu = _listName.find('li').length;
    var _runH  = 30;
    if(_geshu>4){
        setInterval(function(){ gundong(_listName,_runH);},2000);
    }
    function gundong(_listName,_runH){
        var first_html =  _listName.find('li').first().html();
        _listName.find('li').last().after('<li>'+first_html+'</li>');
        _listName.find('li').first().animate({'margin-top':-_runH},500,function(){
            $(this).remove();
        });
    }

});