我們都知道進入一個新的未知領域,大多數的學生都會選擇從理論開始學習。
本系列文章將從實務層面著手,讀者不僅能從中學習理論,也能理解如何將理論應用於實作中。
大家好! 今天要實作的是表單的輸入提示。我們進入今天的主題吧! 程式碼 const input = Felix('input[id]'); const sta...
大家好! 今天要接續 JS 30 的內容。我們進入今天的主題吧! 程式碼 function parse() { var error = new Typ...
大家好! 今天我們要實作在觸控裝置中偵測手勢的方向。我們進入今天的主題吧!備註:前幾天和今天的範例將會於近期補上。 程式碼 (function (xPos,...
大家好! 各位知道 Medium 的圖片載入效果嗎?就是先模糊圖片,等到載入完成再將圖片轉為清晰的那個效果。我們今天就是要實作這個。 程式碼 window.a...
大家好! 今天我們要實作的是,用 input 選擇圖片並在畫面上顯示預覽圖。我們進入今天的主題吧! 程式碼 Felix('input[type="f...
大家好! 今天我們要實作網頁的深淺色模式。我們進入今天的主題吧! 樣式 body { background-color: #fafafa; c...
大家好! 今天要實作網頁滾動到特定位置時,自動浮現元素的效果。我們進入今天的主題吧! 樣式 [data-revealing] { opacity: 0...
大家好! 樣式 .tabs { width: 100%; max-width: 60em; display: flex; f...
大家好! 今天我們要實作讓網頁的字型大小能平滑地縮放。我們進入今天的主題吧! 樣式 body { font-size: 16px; trans...
大家好! 今天我們要實作向下滾動網頁時,自動隱藏頁手或導覽列的效果。我們進入今天的主題吧! 樣式 header { transition: trans...