Day05 - Flex 实现可伸缩的图片墙中文指南

zhangfaliang 发布于2019-08-20 18:13 / 958人阅读

摘要：实现可伸缩的图片墙中文指南作者简介是推出的一个天挑战。现在你看到的是这系列指南的第篇。完整指南在从零到壹全栈部落。实现效果点击任意一张图片，图片展开，同时从图片上下两方分别移入文字。

Day05 - Flex 实现可伸缩的图片墙中文指南

作者：©liyuechun
简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 5 篇。完整指南在从零到壹全栈部落。

实现效果

点击任意一张图片，图片展开，同时从图片上下两方分别移入文字。点击已经展开的图片后，图片被压缩，同时该图片上下两端的文字被挤走。

HTML源码

  
    
      Hey
      Let"s
      Dance
    
    
      Give
      Take
      Receive
    
    
      Experience
      It
      Today
    
    
      Give
      All
      You can
    
    
      Life
      In
      Motion

初始文档的 DOM 结构：以 .panels 为父 div 之下，有 5 个类名为 .panel 的 div，这 5 个各含有 3 个子 p 标签。而相应的 CSS 样式中，动画时间等特性已经设定好，只需要完成不同状态下的页面布局以及事件监听即可。

CSS 源码

CSS 在这个过程中占了重点，运用 flex 可以使各个元素按一定比例占据页面。在调试的时候，可以把边框显示出来方便查看效果。（border: 1px solid #f00;）

将 .panels 设置为 display:flex

设定每个子 panel 的 flex 值为 1

针对每个子 panel，设为 display:flex，设置其 flex 主轴方向

控制 .panle 的子元素

中的文字垂直、水平居中（多带带看每个 panel，其中的文字也可以用 flex 的思路来使其三等分后居中）

设置为 display:flex

设置 flex 值

设置其子元素的布局方式：垂直水平居中（沿主轴、侧轴居中）

设定点击图片后文字移动的样式

设定点击图片展开后的图片的 flex 值

重要：不了解CSS和Flex的童鞋必看。

CSS参考手册

CSS选择器笔记

flex布局完全入门教程

JS源码

获取所有类名为 panel 的元素

为其添加 click 事件监听，编写触发事件调用的函数（给触发的 DOM 元素添加/去掉样式，实现拉伸/压缩的效果）

为其添加 transitionend 事件监听，编写调用的函数（添加/去掉样式，实现文字的飞入/飞出效果）

源码下载

Github Source Code

社群品牌：从零到壹全栈部落

定位：寻找共好，共同学习，持续输出全栈技术社群

业界荣誉：IT界的逻辑思维

文化：输出是最好的学习方式

官方公众号：全栈部落

社群发起人：春哥(从零到壹创始人，交流微信：liyc1215)

技术交流社区：全栈部落BBS

全栈部落完整系列教程：全栈部落完整电子书学习笔记

关注全栈部落官方公众号，每晚十点接收系列原创技术推送

云服务器 GPU云服务器雷蛇被曝0day漏洞插入鼠标或键盘可快 flex与js交互中文乱码图片墙自定义图片伸缩

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84203.html

小技巧 - 收藏集 - 掘金

摘要：然而学习布局，你只要学习几个手机端页面自适应解决方案布局进阶版附源码示例前端掘金一年前笔者写了一篇手机端页面自适应解决方案布局，意外受到很多朋友的关注和喜欢。十分钟学会 Fiddler - 后端 - 掘金一.Fiddler介绍 Fiddler是一个http抓包改包工具，fiddle英文中有欺骗、伪造之意，与wireshark相比它更轻量级，上手简单，因为只能抓http和https数据...

A Loity 2019-08-20 17:45 评论0 收藏0
Day21 - Geolocation 中文指南

摘要：完整中文版指南及视频教程在从零到壹全栈部落。在此获取到的信息为，以回调函数的形式返回，当获取到位置信息之后，在动态的修改页面中显示的内容和指南针旋转的角度。语法参数成功时候的回调函数，同时传入一个对象当作参数。本文出自：春哥个人博客：http://www.liyuechun.org作者：©黎跃春-追时间的人简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。...

PascalXie 2019-08-21 11:55 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

awesome23 2019-08-20 18:23 评论0 收藏0