当青训营遇上码上掘金
介绍
(相遇)据说世界上两个陌生人相遇且相识的概率是 0.0000005，筹集小伙伴，青训营来自中国五湖四海的同学，组成了各个小组，成为了一群小伙伴。在地图上将小伙伴都筹齐，最终获得奖励卡片！
在地图上点击一位小伙伴就会有一只小飞机飞到筹集相册里，顺利到达一位。 当小伙伴都筹齐了，就会获得卡片！目标完成！
实现
主要分三部分：
- 将人物按钮和飞机放在地图上指定的位置。将相册放满人物。
- 绑定点击事件，在点击人物按钮后，飞机移动到相册的位置后，相册出现对应的人物。
- 在相册里显示的人满了后，胜利的卡片出现！
素材放置
地图作为背景导入，而人物按钮则放入其中。通过绝对定位来放置人物按钮到指定的位置。
地图开启相对定位，因为绝对定位是根据相对块进行定位，而其子元素(人物)则开启绝对定位，并且配合调整偏移量(left和top)来调整位置。
#ln {
position: absolute;
left: 670px;
top: 290px;
}
.sx {
position: absolute;
left: 530px;
top: 350px;
}
.wh {
position: absolute;
left: 530px;
top: 480px;
}
.cq {
position: absolute;
left: 470px;
top: 500px;
}
.zj {
position: absolute;
left: 635px;
top: 520px;
}
.jx {
position: absolute;
left: 580px;
top: 540px;
}
.gd {
position: absolute;
left: 550px;
top: 630px;
}
而为了达到点击人物按钮后，相册里能出现对应的位置，比如点击第四个按钮，第四个人物出现，因此不能使用display属性隐藏起来，而是使用visibility: hidden;。因为display:none是元素真的消除该元素，而visibility: hidden则是视觉上隐藏起来。
绑定事件
给每个人物绑定上点击事件，并且在点击之后，将该元素移除，display:none。
点击之后，让飞机执行动画，飞到指定位置，并且在飞到后，将动画清零，下一次点击再触发。
在飞机到达后，相册里人物出现，因此使用定时器，在动画时间结束后出现。
那么如果每一个都绑定太麻烦了，因此我设置了for循环，由于前八个li是这八个人物，因此for循环的范围为8。
let ln = document.getElementById("ln");
let p1 = document.getElementById("p1");
let target = document.getElementById("target");
let map = document.getElementsByTagName('li');
let allPerson = document.getElementsByTagName('h5');
let final = document.getElementById("final");
var num = 8;
for(let i=0;i<=8;i++){
let location = map[i];
let person = allPerson[i];
location.onclick = function(){
location.style.display = "none";
p1.style.animationName = "test";
target.innerHTML = "x"+ (num-1);
num--;
setTimeout(function(){
p1.style.animationName = "";
},2000)
setTimeout(function(){
person.style.visibility = "visible";
},2000)
}
}
最后，在相册里的人物筹集后，及时获取胜利卡片。 用一个变量来存储成功次数，当成功次数达到8次时，2.5s后出现(动画时间为2s)。
var num = 8;
if(num==0){
setTimeout(function(){
final.style.display = "block";
},2500)
}
