[筆記]Image Slide Box

tofudraft

2018-07-14

CSS, JS, 學習, 筆記

本來想直接先做比較變化形態的
一步步來
就花了不少時間
CSS 用了 flex 和 transition
(我果然CSS比JS要差許多呀)
(在學JS、工作的時候也很少在玩到動畫呢)

順帶一提
JavaScript有很多可以玩
現在都可以寫app、桌面應用…

顯示上
橫向顯示
選取的會滑動到該位置、放大

可以再加
像是檢視原尺寸圖片、全螢幕圖片(lightbox)這樣的

概念上…

先將圖片列出
使用flex-box方式排列顯示
不換行
水平置中對齊
會用flex，還有一個原因就是垂直置中
只要flex item的上下margin設為auto就好了
但是
flex container要設position屬性

固定預設圖片高度
設定active變化樣式
動態切換

再來就是要去算
圖片列表顯示區塊 (範例裡的是.nav區塊) 的位移 (left)
= 顯示區的寬度 / 2 - 選取的圖片寬度 / 2 - 選取的圖片與顯示區左邊界的距離
(對應到JS第79行)

因為考量到寬度變化
就會要等完成的時間，再做位移

See the Pen XBmopz by ChengFu, Lin (@jtofu0806) on CodePen.