吳政賢 OA Wu LiveCoding.tw
實作 jQuery imgLiquid 套件 - OA Wu's Blog

實作 jQuery imgLiquid 套件

前端 HTML WEB JavaScript CSS CSS3 HTML5 jQuery OAF2E jQuery Extend jQuery 套件

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

實作 jQuery imgLiquid 套件
垂直置中(藍色為父層、黃色為 img 元素)

實作 jQuery imgLiquid 套件
水平置中(藍色為父層、黃色為 img 元素)

 

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

首先需要幾個先決條件:

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

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

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