實作 jQuery imgLiquid 套件 imgLiquid 是一個處理前端圖片置中的 jQuery Extend Function,其中參考了 imgLiquid,但其架構與做法不大相同。 此作品雖然與 imgLiquid 功能一樣,但是做法不同,前者將 設定成隱藏,在取出其圖片網址後設定在該 父元素的 Style,而我的這次要實作的雖然目的相同,但做法則不一樣。 首先需要…

實作 jQuery imgLiquid 套件

imgLiquid 是一個處理前端圖片置中的 jQuery Extend Function,其中參考了 imgLiquid,但其架構與做法不大相同。

垂直置中(藍色為父層、黃色為 img 元素)

水平置中(藍色為父層、黃色為 img 元素)

此作品雖然與 imgLiquid 功能一樣,但是做法不同,前者將 設定成隱藏,在取出其圖片網址後設定在該 父元素的 Style,而我的這次要實作的雖然目的相同,但做法則不一樣。

首先需要幾個先決條件:

  • 父層 position 一定要是 position、absolute、fixed。
  • 父層一定要有設定 width 以及 height。

做法是將指定的元素 position 設定成 absolute,在用 top、right、bottom、left 去調整位置,而此時父層再加上一項屬性 overflow: hidden; 即可做到調整位置的效果了!

其中功能也加入很多方式使用,包含了搭配元素屬性設定..等功能,若要更清楚瞭解可以置 GitHub 查看說明。

相關參考

實作 jQuery scrollSliderView 套件 - OA Wu's Blog
實作 jQuery scrollSliderView 套件
實作 jQuery scrollSliderView 套件實作 jQuery scrollSliderView 套件 OA-scrollSliderView 這是一個前端 jQuery Extend Function,主要架構於 jQuery,此版本是支援 Responsive Web Design(RWD) 的頁面。 相關參考 Live Demo GitHub 原始碼
用 jQuery 做迷宮遊戲 - OA Wu's Blog
用 jQuery 做迷宮遊戲
用 jQuery 做迷宮遊戲用 jQuery 做迷宮遊戲 此作品主要架構於 jQuery 之下實作,它不是一個前端 jQuery extend function,而是 based on jQuery 的前端迷宮遊戲,並且當使用智慧型手機瀏覽時,可支援使用重力感測器(G-sensor),所以可利用搖晃手機達到操作方向的簡單體感遊戲。 專案內有附一隻地圖產生器,可以提供各位自行編輯迷宮地圖路線,…
實作 jQuery Navbar 套件 - OA Wu's Blog
實作 jQuery Navbar 套件
實作 jQuery Navbar 套件實作 jQuery Navbar 套件 這是一個前端 jQuery Extend Function,主要架構於 jQuery 以及 SCSS、SASS。開發者可自行設定 SCSS 變數、jQuery Extend Options 來更換樣式。 相關參考 Live Demo GitHub 原始碼
實作 Material Web Design - OA Wu's Blog
實作 Material Web Design
實作 Material Web Design實作 Material Web Design 這套前端工具主要是參考 Material UI 風格設計,並且這是一個藉由 Compass、HTML 以及 jQuery..等各種前端工具實作的 Material UI Design for Web,開發者可以自行使用 SCSS 或者 CSS 來做修改,目前是使用 jQuery 來達到更多 UI 回饋效果。 以下是基本的介紹: 此作品開發工具主要使用 Gulp、Co…
吳政賢 個人簡歷 OA Wu LiveCoding.tw