Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oawu/oa-imgliquid
jQuery plugin to resize images.
https://github.com/oawu/oa-imgliquid
Last synced: about 1 month ago
JSON representation
jQuery plugin to resize images.
- Host: GitHub
- URL: https://github.com/oawu/oa-imgliquid
- Owner: oawu
- Created: 2014-11-28T14:28:48.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-11-06T13:34:39.000Z (about 8 years ago)
- Last Synced: 2024-03-21T17:59:58.649Z (9 months ago)
- Language: CSS
- Homepage: https://works.ioa.tw/OA-imgLiquid/index.html
- Size: 5.3 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Welcome To OA's imgLiquid!
這是一個 based on [jQuery](http://jquery.com/) 的前端 library。
---
## 聲明
本作品授權採用 姓名標示-非商業性 2.0 台灣 (CC BY-NC 2.0 TW) 授權，詳見 [http://creativecommons.org/licenses/by-nc/2.0/tw/](http://creativecommons.org/licenses/by-nc/2.0/tw/)
## 簡介
* 這是一個前端 jQuery extend function，主要架構於 [jQuery](http://jquery.com/)。
* Demo 範例頁面: [http://works.ioa.tw/OA-imgLiquid/index.html](http://works.ioa.tw/OA-imgLiquid/index.html)
## 目錄
* [說明](#說明)
* [圖解](#圖解)
* [加入 jquery.js](#加入 jquery.js)
* [加入 oa-imgLiquid.js](#加入 oa-imgLiquid.js)
* [元素結構](#元素結構)
* [元素 css 樣式](#元素 css 樣式)
* [Javascript](#Javascript)
* [垂直](#垂直)
* [垂直置中](#垂直置中)
* [垂直置頂](#垂直置頂)
* [垂直置底](#垂直置底)
* [指定位置](#指定位置)
* [水平](#水平)
* [水平置中](#水平置中)
* [水平置左](#水平置左)
* [水平置右](#水平置右)
* [指定位置](#指定位置)
* [其他](#其他)
* [範圍限制](#範圍限制)
* [使用結構 data-position、data-overflow](#使用結構 data-position、data-overflow)
* [關於](#關於)
## 說明
* 圖解
* 加入 jquery.js
```html
```
```html
```
```html
![]()
```
* 元素 css 樣式
- 父層 **position** 一定要是 **position** 或 **absolute**。
- 父層一定要有設定 **width** 或 **height**。
```html
.oa-imgLiquid {
position: relative; /* or absolute */
width: 360px;
height: 180px;
}
```
```javascript
$('.oa-imgLiquid').OAimgLiquid ();
```
```html
![]()
```
```html
.oa-imgLiquid {
position: relative;
width: 360px;
height: 100px;
}
```
```javascript
$('.oa-imgLiquid').OAtab ();
// or
$('.oa-imgLiquid').OAtab ({
position: '='
});
// or
$('.oa-imgLiquid').OAtab ({
position: '50%'
});
```
```html
![]()
```
```html
.oa-imgLiquid {
position: relative;
width: 360px;
height: 100px;
}
```
```javascript
$('.oa-imgLiquid').OAtab ({
position: '-'
});
// or
$('.oa-imgLiquid').OAtab ({
position: '0%'
});
// or
$('.oa-imgLiquid').OAtab ({
position: '0' // or '0px'
});
```
```html
![]()
```
```html
.oa-imgLiquid {
position: relative;
width: 360px;
height: 100px;
}
```
```javascript
$('.oa-imgLiquid').OAtab ({
position: '+'
});
// or
$('.oa-imgLiquid').OAtab ({
position: '100%'
});
```
```html
![]()
```
```html
.oa-imgLiquid {
position: relative;
width: 360px;
height: 100px;
}
```
```javascript
$('.oa-imgLiquid').OAtab ({
position: '20px'
});
// or
$('.oa-imgLiquid').OAtab ({
position: '20%'
});
```
```html
![]()
```
```html
.oa-imgLiquid {
position: relative;
width: 100px;
height: 300px;
}
```
```javascript
$('.oa-imgLiquid').OAtab ();
// or
$('.oa-imgLiquid').OAtab ({
position: '='
});
// or
$('.oa-imgLiquid').OAtab ({
position: '50%'
});
```
```html
![]()
```
```html
.oa-imgLiquid {
position: relative;
width: 100px;
height: 300px;
}
```
```javascript
$('.oa-imgLiquid').OAtab ({
position: '-'
});
// or
$('.oa-imgLiquid').OAtab ({
position: '0%'
});
// or
$('.oa-imgLiquid').OAtab ({
position: '0' // or '0px'
});
```
```html
![]()
```
```html
.oa-imgLiquid {
position: relative;
width: 100px;
height: 300px;
}
```
```javascript
$('.oa-imgLiquid').OAtab ({
position: '+'
});
// or
$('.oa-imgLiquid').OAtab ({
position: '100%'
});
```
```html
![]()
```
```html
.oa-imgLiquid {
position: relative;
width: 100px;
height: 300px;
}
```
```javascript
$('.oa-imgLiquid').OAtab ({
position: '30px'
});
// or
$('.oa-imgLiquid').OAtab ({
position: '30%'
});
```
```html
![]()
```
```html
.oa-imgLiquid {
position: relative;
width: 300px;
height: 100px;
}
```
```javascript
$('.oa-imgLiquid').OAtab ({
overflow: true,
position: '-30px'
});
```
* 使用結構 **data-position**、**data-overflow**
```html
![]()
```
```html
.oa-imgLiquid {
position: relative;
width: 100px;
height: 300px;
}
```
```javascript
$('.oa-imgLiquid').OAtab ();
```
## 關於
* 作者名稱 - [OA Wu](http://www.ioa.tw/)
* E-mail -
* 作品名稱 - OA-imgLiquid
* 最新版本 - 1.0.1
* GitHub - [OA-imgLiquid](https://github.com/comdan66/OA-imgLiquid)
* 更新日期 - 2014/12/05