和上个例子对照一下,总结不同写法。然后自己改版练习一遍,在窗口上面加一选择框,选 1 到 18,作为飞机个数,选择后立即生效。
Document
.relative{
position: relative;
background-color: black;
height:600px;
overflow: hidden;
}
.plane{
background-image:url('planes.png');
width:76px;
height:97px;
position: absolute;
top:-100px;
}
My plane
varN=18;
varplaneSpeed=[];
varplaneTop=[];
$(function(){
createPlanes(N);
for(vari=;i
setPlaneX(i);
}
setInterval(moveAllPlanes,10);//掉下去
});
functioncreatePlanes(num) {
varbox=$('.relative');
for(vari=;i
planeSpeed[i]=3*Math.random()+0.5;
planeTop[i]=-100;
vars='
';
varx=-i%6,y=-parseInt(i/6);
varplane=$(s).css({'background-position':x*76+'px '+y*97+'px'});
box.append(plane);
}
}
functionmovePlane(which) {
planeTop[which]+=planeSpeed[which];
$('#'+which).css();
if(planeTop[which]>600) {
planeTop[which]=-100;
setPlaneX(which);
}
}
functionmoveAllPlanes() {
for(vari=;i
movePlane(i);
}
}
////设置飞机x坐标为随机数
functionsetPlaneX(pid) {
varplaneWidth=76;
varwindowWidth=$('.relative').width();
varx=Math.random()*(windowWidth-planeWidth);
$('#'+pid).css();
}
领取专属 10元无门槛券
私享最新 技术干货