成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Day05 - Flex 實(shí)現(xiàn)可伸縮的圖片墻 中文指南

zhangfaliang / 972人閱讀

摘要：實(shí)現(xiàn)可伸縮的圖片墻中文指南作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)?，F(xiàn)在你看到的是這系列指南的第篇。完整指南在從零到壹全棧部落。實(shí)現(xiàn)效果點(diǎn)擊任意一張圖片，圖片展開，同時(shí)從圖片上下兩方分別移入文字。

Day05 - Flex 實(shí)現(xiàn)可伸縮的圖片墻 中文指南 
作者：?liyuechun  
簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫(kù)，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 5 篇。完整指南在 從零到壹全棧部落。
實(shí)現(xiàn)效果

點(diǎn)擊任意一張圖片，圖片展開，同時(shí)從圖片上下兩方分別移入文字。點(diǎn)擊已經(jīng)展開的圖片后，圖片被壓縮，同時(shí)該圖片上下兩端的文字被擠走。

HTML源碼 
  

    

      
Hey

      
Let"s

      
Dance

    

    

      
Give

      
Take

      
Receive

    

    

      
Experience

      
It

      
Today

    

    

      
Give

      
All

      
You can

    

    

      
Life

      
In

      
Motion

初始文檔的 DOM 結(jié)構(gòu)：以 .panels 為父 div 之下，有 5 個(gè)類名為 .panel 的 div，這 5 個(gè)各含有 3 個(gè)子 p 標(biāo)簽。而相應(yīng)的 CSS 樣式中，動(dòng)畫時(shí)間等特性已經(jīng)設(shè)定好，只需要完成不同狀態(tài)下的頁(yè)面布局以及事件監(jiān)聽即可。

CSS 源碼

CSS 在這個(gè)過程中占了重點(diǎn)，運(yùn)用 flex 可以使各個(gè)元素按一定比例占據(jù)頁(yè)面。在調(diào)試的時(shí)候，可以把邊框顯示出來方便查看效果。（border: 1px solid #f00;）

將 .panels 設(shè)置為 display:flex

設(shè)定每個(gè)子 panel 的 flex 值為 1

針對(duì)每個(gè)子 panel，設(shè)為 display:flex，設(shè)置其 flex 主軸方向

控制 .panle 的子元素

中的文字垂直、水平居中（多帶帶看每個(gè) panel，其中的文字也可以用 flex 的思路來使其三等分后居中）

設(shè)置為 display:flex

設(shè)置 flex 值

設(shè)置其子元素的布局方式：垂直水平居中（沿主軸、側(cè)軸居中）

設(shè)定點(diǎn)擊圖片后文字移動(dòng)的樣式

設(shè)定點(diǎn)擊圖片展開后的圖片的 flex 值

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

CSS參考手冊(cè)

CSS選擇器筆記

flex布局完全入門教程

JS源碼

獲取所有類名為 panel 的元素

為其添加 click 事件監(jiān)聽，編寫觸發(fā)事件調(diào)用的函數(shù)（給觸發(fā)的 DOM 元素添加/去掉樣式，實(shí)現(xiàn)拉伸/壓縮的效果）

為其添加 transitionend 事件監(jiān)聽，編寫調(diào)用的函數(shù)（添加/去掉樣式，實(shí)現(xiàn)文字的飛入/飛出效果）

源碼下載

Github Source Code

社群品牌：從零到壹全棧部落


定位：尋找共好，共同學(xué)習(xí)，持續(xù)輸出全棧技術(shù)社群


業(yè)界榮譽(yù)：IT界的邏輯思維


文化：輸出是最好的學(xué)習(xí)方式


官方公眾號(hào)：全棧部落


社群發(fā)起人：春哥(從零到壹創(chuàng)始人，交流微信：liyc1215)


技術(shù)交流社區(qū)：全棧部落BBS


全棧部落完整系列教程：全棧部落完整電子書學(xué)習(xí)筆記
關(guān)注全棧部落官方公眾號(hào)，每晚十點(diǎn)接收系列原創(chuàng)技術(shù)推送

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84203.html

相關(guān)文章

  • 小技巧 - 收藏集 - 掘金

    摘要：然而學(xué)習(xí)布局，你只要學(xué)習(xí)幾個(gè)手機(jī)端頁(yè)面自適應(yīng)解決方案布局進(jìn)階版附源碼示例前端掘金一年前筆者寫了一篇手機(jī)端頁(yè)面自適應(yīng)解決方案布局，意外受到很多朋友的關(guān)注和喜歡。 十分鐘學(xué)會(huì) Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個(gè)http抓包改包工具，fiddle英文中有欺騙、偽造之意，與wireshark相比它更輕量級(jí)，上手簡(jiǎn)單，因?yàn)橹荒茏ttp和https數(shù)據(jù)...

    A Loity 評(píng)論0 收藏0

  • Day21 - Geolocation 中文指南

    摘要：完整中文版指南及視頻教程在從零到壹全棧部落。在此獲取到的信息為，以回調(diào)函數(shù)的形式返回，當(dāng)獲取到位置信息之后，在動(dòng)態(tài)的修改頁(yè)面中顯示的內(nèi)容和指南針旋轉(zhuǎn)的角度。語法參數(shù)成功時(shí)候的回調(diào)函數(shù)，同時(shí)傳入一個(gè)對(duì)象當(dāng)作參數(shù)。 本文出自：春哥個(gè)人博客：http://www.liyuechun.org作者：?黎躍春-追時(shí)間的人簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。...

    PascalXie 評(píng)論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對(duì)底部前端掘金來自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評(píng)論0 收藏0

  • 前端資源收集整理

    摘要：工作原因，最近一年斷斷續(xù)續(xù)寫了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 工作原因，最近一年斷斷續(xù)續(xù)寫了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關(guān)資源匯總 學(xué)習(xí)指導(dǎo) 精華文章 Web前端的路該怎么走？：文章超長(zhǎng)，但是干貨超級(jí)多，值得反復(fù)精讀！ 聽說2017你想寫前端？：適合于已經(jīng)度過了小白階...

    awesome23 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<