前端案例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设计
- 首先给flex布局给最大的div,并给他居中对齐。
- 然后给class名为container的div一个flex布局让图片水平排列。
- 将class名为panel的div设置背景图片,覆盖居中不重复,设置flex为1,让所有图片平均分布,设置margin让图片隔开
- h3标签设置为不可见opcity:0;设置为绝对定位,父元素panel为相对定位
- .panel.active设置为flex:8;这样就实现了所占位置的扩充
- .panel.active h3设置为可见opcity:1;设置动画 transiton进行缓冲
- 最后设置限制条件当最大宽度小于480px时container填充所有,利用伪类设置.panel的4个第5个设为不可见
1.2.3 js设计
js逻辑相对简单,利用foreach遍历panel,为便当前点击添加监听事件,当click后遍历panel,首先移除之前所有的active,然后为点击事件添加新的active
1.3 其他
- 源码地址:link
- 其他说明:本项目主要利用了flex布局,通过本项目能够了解简单的flex布局的基础应用场景