jquery 等比例縮放圖片插件

最近給一個客戶做一個小小的圖片管理系統,圖片不經過服務器,直接用的是地址。但是他要求圖片不能變形扭曲。這樣就要在客戶端用JS做。好在有瞭jQuery,這個做起來還比較方便。自己寫瞭個小小的插件www.aiwalls.com autosize.

假設有這麼個圖片

<img src=http://up.aiwalls.com/2011/0908/20110908053241941.jpg" width="200" height="300" />

圖片的尺寸被強制的設為瞭200*300,如果這個地址的圖片比例不是2:3的話,這張圖片就會變形。所以我想辦法,讓他占據的大小依然是200*300,而且讓圖片等比例放大到最大限度。於是有瞭下面插件。

使用方法很簡單。使用前必須在頭部引入jquery庫和我的image.js

<script type="text/javascript" src="static/js/jquery-1.6.1.min.js"></script>

<script type="text/javascript" src="static/js/image.js"></script>

然後我們在圖片上加點料

<img src=http://up.aiwalls.com/2011/0908/20110908053241941.jpg" width="200" height="300" autosize='yes' pos='0' />

這裡的autosize=’yes’是默認的選擇器,image.js已經綁定瞭在文檔加載完畢的時候處理有這個標記的圖片.

pos=’0’表示長圖片居中顯示,這個值有三種選擇,如果不指定這個值,則居中顯示,也為0 .

-1:居於頂部

0:居於中間

1:居於底部

水平方向始終居中顯示.

其實這樣就可以瞭,不用加任何其他的代碼,我們上面的這張圖片已經居中顯示瞭。

已等比例縮放

我們也可以手動指定要處理的圖片。

$(“img”).autosize(‘#999’);

這樣就可以選擇所有圖片並處理它,那麼這裡有一個可選的參數,表示填充的背景色。如果不填寫這個參數,默認填充為白色http://up.aiwalls.com/2011/0908/20110908053237294.rar
 

發佈留言