整体向上移动，循环移动同样的数据

整体向上移动，循环移动同样的数据

var  lis,//一次向ul里添加的li
    bottomUl=0,//ul向上移的距离
    ulNum=0;//插入ul的个数
$.ajax({
    url: "./equpment/lastInfo",
    dataType: 'json',
    success: function (results) {
        lis=results;
    　　liAppengToUl(results);
    　　moveUl();
    }
});
function liAppengToUl(results){ //向ul中插入li，让ulNum为1；
    var frag=document.createDocumentFragment();
    $(results).each(function(index,car){
        var li='<li class="'+ulNum+'">Id为'+car.equpid+'的车辆'+car.equpname+'在'+car.gps_date+'耕作了'+parseFloat(car.area/666.6667).toFixed(2)+'亩地</li>';
        $(frag).append(li);
    });
    $("#ul").append(frag);
    ulNum+=1;
};
function moveUl(){
    bottomUl+=10;//向上移动的距离                                
　　$("#ul").animate({bottom:bottomUl},500);
    var time=setTimeout(moveUl, 500);//0.5秒向上移一次ul，0.5秒移bottomUl的距离
    if($("#ul").height()!=0){
        var height=$("#ul").height();
    }
    if(ulNum>=3){
        $("li.0").remove();//移除第一次添加的所有li
        ulNum=0;
        liAppengToUl(lis);//让ulNum为0，会有一段空白，所以先添加lis
    }        
    if(parseInt($("#ul").css('bottom'))>=(height-window.screen.height*0.9)){ //如果ul向上移的长度大于ul的高度（lis的高度）减去屏幕显示的高度，插入一次lis
        liAppengToUl(lis);
    }
}                

 

转载于:https://www.cnblogs.com/mina-huojian66/p/8031898.html