JavaScript30 為Wes Bos推出的一項為期30天的挑戰，旨在幫助人們用純JavaScript來實現效果，初學者若想在JS方面快速精進，不妨一試。本題為第五題。

實現效果

點擊任意一張圖片，圖片放大X倍，同時圖片上下兩方飛入文字，再點擊已經展開的圖片后，圖片被壓縮，同時頂端和底部的文字飛出。查看我的代碼和demo。

頁面基礎布局

觀察文檔初始布局：在類名為.panels的父元素div之下，有5個類名為.panel的子div，這5個div內均包含3個p標簽。文檔內也已提供CSS樣式及動畫，做題者只需稍許補充并添加監聽事件即可。

<div class="panels"><div class="panel panel1"><p>Hey</p><p>Let's</p><p>Dance</p></div>......<div class="panel panel5"><p>Life</p><p>In</p><p>Motion</p></div></div> 復制代碼

解題思路

CSS部分：

在本章中，大量運用flex布局知識，如需補課，推薦查閱阮一峰大神的博客:

設置父元素也就是最大的容器.panels為display:flex，默認項目沿主軸方向，從左到右排列;

設置每個子元素即容器成員.panel為display:flex，并設置屬性：

• 設置flex: 1,flex為flex-grow, flex-shrink和flex-basis的簡寫；
• 設置justify-content: center，該屬性規定項目在主軸上的對齊方式，center即沿主軸居中排列。
• 設置flex-direction: column，該屬性定義主軸的方向（即項目的排列方向），column表示主軸為垂直方向，起點在上沿；
• 設置align-items: center，即項目在交叉軸上居中對齊。

設置點擊圖片后，文字的移動樣式；

設置點擊圖片后，圖片的flex值。

JS部分：

獲取所有類名為.panel的元素；

為其添加click監聽事件，觸發調用函數，添加或去除樣式，實現圖片拉伸或壓縮的效果；

為其添加transitionend監聽事件，觸發調用函數，添加或去除樣式，實現頂端及底部文字飛入或飛出效果。

CSS部分代碼

html {box-sizing: border-box;background: #ffc600;font-family: 'helvetica neue';font-size: 20px;font-weight: 200;}body {margin: 0;}*,*:before,*:after {box-sizing: inherit;}.panels {min-height: 100vh;overflow: hidden;/*內容溢出元素框時，內容會被修剪，并且其余內容不可見 */display: flex;}.panel {background: #6B0F9C;box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);color: white;text-align: center;align-items: center;/* Safari transitionend event.propertyName === flex *//* Chrome + FF transitionend event.propertyName === flex-grow */transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),background 0.2s;font-size: 20px;background-size: cover;background-position: center;flex: 1;justify-content: center;display: flex;flex-direction: column;}.panel1 {background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);}.......panel5 {background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);}/* Flex Items */.panel>* {margin: 0;width: 100%;transition: transform 0.5s;flex: 1 0 auto;display: flex;justify-content: center;align-items: center;}.panel>*:first-child {transform: translateY(-100%);}.panel.open-active>*:first-child {transform: translateY(0);}.panel>*:last-child {transform: translateY(100%);}.panel.open-active>*:last-child {transform: translateY(0);}.panel p {text-transform: uppercase;font-family: 'Amatic SC', cursive;text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);font-size: 2em;}.panel p:nth-child(2) {font-size: 4em;}.panel.open {flex: 5;font-size: 40px;} 復制代碼

JavaScript完整代碼：

const Panels = document.querySelectorAll('.panel');function clearOpen() {Panels.forEach(panel => panel.classList.remove('open'))}function toggelOpen() {this.classList.toggle('open');}function toggleActive(e) {if (e.propertyName.includes('flex')) {this.classList.toggle('open-active')}}Panels.forEach(panel => panel.addEventListener('click', toggelOpen));Panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); 復制代碼

知識點

Flex布局：

采用 Flex 布局的元素，稱為 Flex 容器。它的所有子元素自動成為容器成員，稱為 Flex 項目。容器默認存在兩根軸：水平的主軸main axis和垂直的交叉軸cross axis。

Flex容器屬性：

flex-direction屬性決定主軸的方向（即項目的排列方向）;

flex-wrap屬性定義，如果一條軸線排不下，如何換行;

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式;

justify-content屬性定義了項目在主軸上的對齊方式。

align-items屬性定義項目在交叉軸上如何對齊。

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

Flex項目屬性:

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間。

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。

介紹完基礎知識再看本題就清晰很多了，本題嵌套了三個Flex容器，分別為：

• .panels:使得子元素.panel橫向等分排列；
• .panel：使得其中的<p>縱向等分排列；
• p:使得其中的文字垂直水平居中分布。 不過以上對Flex的介紹還不算詳細，若想深入了解，可查閱這里。

translateY

為實現頂端及底部文字飛入飛出的效果，題中使用了一個用法，即transform: translateY，可實現元素在Y軸方向上移動。

轉載于:https://juejin.im/post/5ad3072851882555745a24c5

總結

以上是生活随笔為你收集整理的JavaScript 5/30：Flex Panel Gallery即FLEX布局的图片库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。