[前端小项目] 扩展卡片 Expanding Cards(50projects50days)

??前言

• 这个小项目源于github项目:?50 projects 50 days, 这个项目包含了50个小型前端项目，适合学习了Html+Css+JavaScript但是还没有学习框架的前端新手作为练习。
• 这里是原项目的代码实现??扩展卡片 Expanding Cards

??分析

??布局

• 卡片横向排列，可以使用flex布局.
• 文字位于卡片左下角，可以将卡片设置为相对定位position:relative;,文字设置为绝对定位position:absolute;，然后设置left和bottom属性.

??文字样式

• 大卡片有文字，小卡片没有文字，一开始的想法是给小卡片的文字设置display:none;，大卡片的文字设置display:block;。后来发现不可行，因为点击小卡片后，一开始卡片还没完全变大，但是如果此时将文字的display:none;更换为display:block;则会出现文字被较小的宽度挤成好几行，尽管设置成溢出时不换行、显示省略号的样式，文字也是突然出现的，较为突兀。
• 显示文字与否可以用调整透明度实现，不显示则opacity:0;，显示则opacity:1;，并且可以使用transition:opacity ease;，这样的话，过渡就会比较自然。

??点击事件

• 这里我使用了事件委托，而不是每一个卡片都绑定点击事件，这样可以提高效率。事件委托是给这些卡片的父元素绑定点击事件，通过事件冒泡原理，当点击卡片时，父元素会检测到点击事件，然后可以通过event对象的target属性找到是哪一个卡片被点击了。这样的话就可以只绑定一个点击事件，而不是有多少卡片就要绑定多少点击事件，从而提高了效率。
• 点击事件触发后：
  1. 所有卡片变成小卡片，即宽度设置为统一的较小的值。
  2. 被点击的卡片变成大卡片，即宽度设置为较大的值。
  3. 修改被点击的卡片内部文字的opacity，使其显现。

??代码

    
    
    
    
    


    

        
Explore the world
        
Wild Forest
        
Sunny Beach
        
City on Winter
        
Mountains - Clouds
    

参考文章

• ?? JS事件委托（事件代理）