實作 jQuery ScrollView 套件 為了讓手機水平瀏覽圖片的操作更像 App 的介面,所以利用 JavaScript、jQuery、jQuery-UI、jQuery.UI.Touch-Punch 等套件,實作 ScrollView 的水平滑動效果。 功能主要是依賴 jQuery 與 jquery-UI 實作,再利用 jQuery-UI 的 Draggable 實作拖曳的效果,則 Draggable 需要設定 axis: 'x' 來固…

實作 jQuery ScrollView 套件

為了讓手機水平瀏覽圖片的操作更像 App 的介面,所以利用 JavaScriptjQueryjQuery-UIjQuery.UI.Touch-Punch 等套件,實作 ScrollView 的水平滑動效果。

功能主要是依賴 jQuery 與 jquery-UI 實作,再利用 jQuery-UI 的 Draggable 實作拖曳的效果,則 Draggable 需要設定 axis: 'x' 來固定水平拖曳移動。不過此時會發現手機的滑動時 Draggable 會失效,所以還需仰賴 jQuery.UI.Touch-Punch 修正!然後我再利用這些巨人大大的 library 作出這個 jQuery extend function!

特別注意

  • 手機上實測好像還會頓頓的.. 還在調整中..
  • Demo 頁面所有元素都是採用 box-sizing: border-box; 操作,所以要改的話,要稍微注意版型 CSS 部分。
  • 因為是使用 SCSS 撰寫,故此專案會有 SCSS、CSS 的資料夾。
  • 目前最多容納 100 個水平元素!
  • Demo 頁面中 imgLiquid 只是讓我調整圖片的顯示,非主要功能!

相關參考

數字翻轉計數器 - OA Wu's Blog
數字翻轉計數器
數字翻轉計數器 使用簡單的 JavaScript 與 SCSS 實作數字翻轉計數器,藉由設定每個計數器元素的 class 來達成不同數字的顯示,分別以 n0~n9 的 class 來設定子元素 top 的位置。GitHub 內的關鍵 css 與 JavaScript 分別在這裡和這裡,以下依照步驟配合圖片講解一下! 首先建立要用的 HTML 結構,基本上就是 span 代表一個…
實作台北 • 藝文活動 - OA Wu's Blog
實作台北 • 藝文活動
實作台北 • 藝文活動 這是項利用新北市政府資料開放平台提供的新北市政府文化局藝文活動 API 所製作的台北 • 藝文活動。使用 PHP 將 API 資料取下來後編輯成 HTML 頁面,並且放置到 Amazon S3。放置部署過程中同時將頁面所需的 SCSS、JavaScript 一起上傳至 S3。 上傳 S3 過程採用 PHP 執行,關鍵程式碼在這裡,主要是利用…
Pokémon Go 補給站地圖 - OA Wu's Blog
Pokémon Go 補給站地圖
Pokémon Go 補給站地圖 這是一個 Pokémon Go 進化後 CP 推測工具,可以快速查詢寶可夢進化後的 CP 範圍值,同時藉由網友互助回報而建立的全台寶可夢巢穴位置,讓大家可以查詢各精靈在台灣的分佈,若大家想要共同編輯巢穴文件可與網站作者聯絡,同時也可以查詢全台灣的補給站、道館的分佈。 若要進一步的查詢各精靈的精準數…
聊天地圖 LiveMaps - OA Wu's Blog
聊天地圖 LiveMaps
聊天地圖 LiveMaps LiveMaps 是一個即時地圖聊天室,讓你在世界上任何位置都可以發出自己的感想動態。每個人都可以在地圖分享著她在世界各地、城市角落的心情寫照,網站藉由 Google 所提供的 Firebase 的 Realtime Database 以及 Google Maps JavaScript API 免費服務實作。 聊天地圖也是一個純前端技術的網站,仰賴 Fireb…
吳政賢個人簡歷OA WuLiveCoding.tw
OA Wu's Blog
開發心得
實作 jQuery ScrollView 套件