我想讓網頁的圖片放大，局部放大，本來我的作法是把圖片下載下來或是瀏覽器提供檢視圖片的功能放大來看。

做了幾次後，我發現這不濟事，還是得找個合用的 js來處理。

找了幾個不太合用，最後發現這個很不錯：

他的作法是img標籤可帶一個圖片，也可以不帶就用原圖

這樣子就能放一個小圖，滑鼠過去就拿大圖的一部分給你看。

但是這不符合我的需要，因為我只有一張圖，沒有小圖。

而且我的圖片在網頁上還會配合視窗作大小的變化(響應式設計)，這樣子會很怪異。

例如原圖 300x200，有可能縮放到900x600(失真)，我附的大圖是600x400。放大鏡一過去竟然變成放大鏡中的畫面比原本看到的還小。

所以我就修改原本的js，開了一個GIT分枝，再把他放出來。

HTML

JQUERY/JS

<script src="query.elevatezoom.js"></script>
$("img").elevateZoom({zoomType:'lens',lensSize:150,zoomimageRatio:2.3});

zoomimageRatio:2.3 代表放大原圖的 2.3倍，預設1