前端案例50---1.ExpandingCards

1.Expanding Cards

1.1 案例分析

实现5张图片的滑块功能。当点击图片时，实现图片展开，未点击则收起。当页面小于480px，后两张图片自动收起。

1.2 功能设计

1.2.1 html设计

​引入css样式和js文件，本小节结构较为简单，在一个大div中，包括5个div标签用于存放5张图片，在每个div中加入h3标签用于显示文字。

1.2.2 css设计

1. 首先给flex布局给最大的div，并给他居中对齐。
2. 然后给class名为container的div一个flex布局让图片水平排列。
3. 将class名为panel的div设置背景图片，覆盖居中不重复，设置flex为1，让所有图片平均分布，设置margin让图片隔开
4. h3标签设置为不可见opcity：0；设置为绝对定位，父元素panel为相对定位
5. .panel.active设置为flex：8；这样就实现了所占位置的扩充
6. .panel.active h3设置为可见opcity：1；设置动画 transiton进行缓冲
7. 最后设置限制条件当最大宽度小于480px时container填充所有，利用伪类设置.panel的4个第5个设为不可见

1.2.3 js设计

js逻辑相对简单，利用foreach遍历panel，为便当前点击添加监听事件，当click后遍历panel，首先移除之前所有的active，然后为点击事件添加新的active

1.3 其他

• 源码地址：link
• 其他说明：本项目主要利用了flex布局，通过本项目能够了解简单的flex布局的基础应用场景