前言
此项目是根据GitHub上面很火的一个项目的跟练学习项目“50projects50days”，很适合刚学习了HTML+CSS+JS的同学来巩固学习到的知识，并且学习实践的项目。
分析
知识点
- 居中：居中可以使用flex布局的方法实现
display: flex;
align-items: center;
justify-content: center;
background-size
background-size:设置背景图片的大小。
background-size:contain /*将图片作为容器背景，并使用图片原始的大小，空白的地方显示背景色。*/
background-size:cover /*保持宽高比的情况下，缩放图片铺满容器，可能会出现裁剪上下或左右导致图片不能完整显示。*/
background-size:30%
background-size:10px /*一个值，设置指定图片的宽度，高度未隐性的auto*/
background-size:3em 15% /*两个值，设置高度和宽度，第一个值为宽度，第二个值为高度。*/
background-size:auto,auto /*使用逗号分隔的两个图片的设置。*/
/*全局属性*/
background-size:inherit 继承
background-size:initial 最初的
background-size:unset 不设置
cursor: pointer;设置光标类型，在鼠标指针悬停在元素上时显示相应的样式。此样式为手型。flex: 0.5;弹性项目里面的增大和缩小，此处为缩小一倍transition: all 700ms ease-in;所有可以被动画的属性都按照加速过渡动画，所用时间为700ms
transition:过渡的属性（all或者其他属性） 动画的时间 动画过渡的速度方式（linear线性/ease-in加速/ease-out减速）等 动画效果开始之前等待的时间
- forEach：遍历元素
布局
- 新建一个container容器，在容器里面有5个div，背景为电影海报，并在div里面添加海报文字。
- 因为海报是横向布局，所以使用flex布局。
- 文字位于海报的左下角，可以将海报设置为相对定位
position:relative，文字设置为绝对定位position:absolute，然后通过设置left和bottom属性将文字的位置调整到左下角。简称使用子绝父相。
文字样式
海报在过渡成大图的时候是有文字的，在小图时没有文字，为了过渡自然，可以在动画中调整opacity透明度来控制文字出现和消失，opacity:0的时候是完全透明，不显示；opacity:1的时候是完全不透明，显示。
点击事件
使用forEach遍历卡片元素，给每一个卡片元素绑定点击事件。先遍历卡片元素，取消active类，将所有卡片变成小卡片；再同时遍历卡片，在鼠标点击事件中添加active类，将被点击的小卡片变成大卡片。 当点击事件触发之后：
- 所有卡片变成小卡片，
flex：0.5统一缩放比例 - 被点击的卡片变成大卡片，
flex:5放大10倍。 - 被点击的卡片中的文字的
opacity透明度从0到1
代码
代码改进
使用forEach遍历元素有一个问题，我点击事件只需要一个卡片绑定点击事件，现在是每一个卡片都会绑定点击事件，造成了效率低下。所以，可以使用事件委托，通过事件冒泡的原理，在点击卡片时，父元素会检测到点击事件，然后通过event事件的target属性来找到是哪个子元素被点击了，这样只要绑定一个卡片的点击事件就可以达成效果，提高了效率。改进的代码如下：
window.onload = function(){
//获取DOM元素
const container = document.getElementsByClassName('container')[0];
const panel = document.getElementsByClassName('panel');
//绑定点击事件（事件委托）
container.onclick = function(e){
e = window.event || e;
const target = e.target; //从target属性获取被点击的元素
//首先将所以卡片设置未小卡片
for(let i=0;i<panel.length;i++){
panel[i].classList.remove('active');
}
//被点击的卡片设置为大卡片
target.classList.add('active');
}
}
