[Hero Of UnderGround 地下城] — 11F LightBox 燈箱效果

發表於 2019-06-03 更新於 2024-01-28 分類於 Code ，前端， HeroOfUnground[地下城] 文章字數： 2.5k 所需閱讀時間 ≈ 2 分鐘

成果 & 程式碼

Demo：點我

Code Source：點我

Introduction & 前言

不小心又直接往 11F 邁進了，原本說好的 9F 要完成看來要一陣子了，卡了不少問題 ( 汗…

另外這次特地整理了一下 GitHub，如果想參考之前樓層的介紹以及 Source Code 可以來坐坐喔哈。

傳送門：**請點我**

Summary & 摘要

由於JS地下城每個BOSS的弱點都不一樣，每一層都要由弱點去進行攻略，本次BOSS的弱點有三項。

【特定技術】不可用 JS 框架，只能單純用原生 JS。
【特定技術】需符合響應式設計，什麼你說設計稿沒提供？嗯，你是勇者嘛，通靈什麻的一定略懂略懂嘍
【特定技術】當螢幕伸縮(resize)時，介面與 JS 功能也需正常

畫面製作

這次的關卡其實也沒有特別難的地方，就是響應式的地方麻煩了一點。還有這關卡主要是考驗切版技巧，在切版的時候必須特別考慮到 RWD 的時候怎麼呈現，還有斷點必須自己去抓，是說關卡的 BOSS 弱點雖然越來越少了，可是越來越不簡單了。

在顯示的 lightBox 調整上花了一點時間，主要是主要的頁面跟燈箱頁面的高度對不上，主要頁面在響應式的時候會直接把高度撐高，但是燈箱頁面不會跟著拉高，剛開始主要是用 position:absolute，後來索性改用 fixed 解決。

關於 RWD

在前陣子剛好上了六角的 Sass 課程，這次就剛好自己寫了 CSS 的規範練習，不過犯了新手常犯的錯，過度命名。

原本想照著 BEM 的規範去命名資料夾，雖然不是一定要照著規範走，主要還是看自己寫得順為主，但是沒想到其實最好的做法是把常用的工具抽離出來，模組化，或是工具化，其實才是最好的做法，這邊自己還要再精進加油呢。

有興趣參考 CSS 命名的可以看我的這篇文章：[CSS Notes] — 談談CSS模組化

格線系統是老大

雖然這次命名還有很大進步空間，但是在之前課程吸取最大的經驗且最好在實戰中拿來實用的就是時時提醒自己切版一定要有自己的格線系統。

有了隔線系統能少寫好幾行的 Code，甚至能重組網頁也沒問題，今天我要把 header 的內容拿去 footer 內，沒問題！今天要把 Sidebar 的內容拿去 article 內，沒問題！

@mixin pad {
    @media screen and (max-width: 991px) {
      @content
    }
}
@mixin md-mobile {
    @media screen and (max-width: 767px) {
      @content
    }
}
// 搭配 mixin 天衣無縫

拋棄 JS 框架

從剛開始的地下層朋友建議用 JQuery 實作，剛開始還傻傻地覺得怎麼不從 Javascript 開始邊學呢，後來用慣了突然不能用 JS 框架還真有點困擾呢，就像是沒有了 v-bind v-if，不過勇者的精神就是衝就對了，哈。

這次必較麻煩的點是要判斷目前點的是哪張圖片，剛開始不知道 li 能直接去抓排序，還傻傻的以為 javascript 也能使用 div.index() 這類的語法，最後解決方法還是用最笨的方式給他一個 Class Name，然後再用變數去裝，最後 split 它。

1
2
3

// 抓取 Class 的名稱來判斷是第幾個
var imgClass_Name = e.target.className.split(" ");
now_imgIndex = parseInt(imgClass_Name[2].split("-")[2]);

切換燈片

這邊反而比較容易解決，在剛開始就先把幻燈片丟進陣列，再靠上面判斷的數字去 +1 或 -1，如果碰到 -1 或大於幻燈片圖片的時候再把它改為第 0 個，或是 now_imgIndex.length-1。

在按鈕的部分也可以直接給他們一個相同的 Class 然後再點選的時候靠 Switch 事件去判斷現在點的是哪一個，可以減少寫 Code 的行數。

Conclusion & 結論

這次的關卡算是很快的解決，不過要改進的地方還是很多，每每切這種基本功版的時候就能知道自己的基礎打得夠不夠穩，我想還是需要加油的。

最近是接觸前端滿半年的時間了，說長不長說短不短，在自己胡亂完了一些東西後，發現好多東西都息息相關，不過跟練功一樣，急不得，所以有練功機會就要抓著練習。

最後除了繼續努力之外還是要列出檢討的地方，然後朝下一關繼續加油，完畢。

JS
邏輯
文筆
體重

我的其他範例

Hero Of UnderGround — 1F Multiplicatio 九九乘法表

Demo：點我

Code Source：點我
Hero Of UnderGround — 2F Clock 時鐘

Demo：點我

Code Source：點我
Hero Of UnderGround — 3F Calculator 計算機

Demo：點我

Code Source：點我
Hero Of UnderGround — 4F World Clock 各國時區

Demo：點我

Code Source：點我

Blog：點我
Hero Of UnderGround — 5F AQI 全台空氣指標儀表板

Demo：*點我

Code Source：*點我

Blog：點我
Hero Of UnderGround — 6F SECONDS CHALLENGE 倒數遊戲

Demo：點我

Code Source：點我

Blog：點我
Hero Of UnderGround — 7F Canvas 畫板

Demo：點我

Code Source：點我

Blog：點我
Hero Of UnderGround — 8F Tic-Tac-Toe 井字遊戲

Demo：點我

Code Source：點我

Blog：點我
Hero Of UnderGround — 10F Chrome extension 幹話生產器

Zip ：點我

Code Source：點我

Blog：點我