作品網址:


https://steven5j.github.io/13-Slide-in-on-Scroll/

 

 


主題目標


  • 隨著卷軸移動到中央,讓圖片動態顯示。

 


需求思考分析


  1. 獲取頁面中的所有圖片元素
  2. 滾動事件監聽
  3. 尺寸獲取及處理
  4. 滾動至指定區域的條件判斷

 


處理步驟


步驟 1.

  • 首先取得所有圖片 HTML ,並建立空的 Function checkSlide 與綁定 scroll 捲軸移動事件。

步驟 2.

  • 因為 scroll 每次觸發頻率過高,所以呼叫 debounce 來降低呼叫頻率,避免效能損耗
  • 針對所有圖片 HTML 進行 foreach 迴圈
  • 取得目前畫面所在的高度
  • 取得圖片所在的高度

步驟 3.

  • 依照上一步驟取得的高度位置,進行判斷,然後添加 active class驗證輸入的字符。
  • 此處方法是將每一個輸入的字符存入pressed數組,然後處理數組,使其呈現隊列的性質,也就是輸入一個字符時,會擠出原有的的字符,保證其最大長度始終為secretCode的長度。
  • 這樣做的目的是為了便於驗證暗號,只有完整無誤的輸入一次暗號時,才會觸發相應的效果。當然這只是其中一種處理辦法,也還有其他辦法。

特別技術、函式


<HTML>

<CSS>

<JavaScript>

WindowOrWorkerGlobalScope.clearTimeout()

清除 setTimeout 設定。

window.setTimeout

setTimeout()方法設置一個定時器,該定時器在定時器到期後執行一個函數或指定的一段代碼。

Function.prototype.apply()

apply() 方法會呼叫一個以 this 的代表值和一個陣列形式的值組(或是一個 array-like object )為參數的函式。

throttle() 與debounce()

1. 去抖動 debounce

模仿電器開關處理的方法,把多個訊號合併成一個訊號。讓一個函式在連續觸發時只執行一次。一個常見的用法是使用者連續輸入基本資訊後,才觸發事件處理器進行格式確認。

2. 函數節流 throttle

函數節流讓一個函數不要執行得太頻繁,也就是控制函數最高呼叫頻率,減少一些過快的呼叫來節流。一個常見的用法是減少 scroll 的觸發頻率,因為 scroll 常常綁定一些消耗資源的 render 的事件。


參考資料:


JS30紀錄 13-Slide in on Scroll: https://shunnien.github.io/2017/12/31/Javascript30days-13/

Js 30 day 中文指南:https://github.com/soyaine/JavaScript30

Steven玄

謝謝您觀看本站內容!! 希望文章內容有幫助到你!! 西元93年台灣男,努力成為優秀的軟體工程師 和 創造多元收入,較常執行於 程式撰寫、網站系統架設規劃 和 商業策略分析規劃,目前在網站開發公司擔任工程師。

發佈留言