整体向上移动,循环移动同样的数据
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); } }