[無邊框]

Jquery 圖片放大的工具：放大鏡

“

想讓網頁上的圖片局部放大，有沒有簡單好用的 jquery?

„

分享此文連結 //n.sfs.tw/13099

分享連結 Jquery 圖片放大的工具：放大鏡@新精讚

(文章歡迎轉載，務必尊重版權註明連結來源)

2019-10-22 15:54:07 最後編修

2019-02-09 21:49:49 By 張○○

自動目錄

- 官網
- 設定
範例圖
下載

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

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

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

官網

https://www.elevateweb.co.uk/image-zoom

設定

https://www.elevateweb.co.uk/image-zoom/configuration

他的作法是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

下載

https://github.com/AxerZ/elevatezoom

END

你可能感興趣的文章

[jQuery] checkbox 及 radio 設定值 jQuery 之 checkbox 及 radio 取值及設定值的方法

[Javascript/Jquery] 移除textarea中空行、空白行。 textarea中要移除沒內容的空行、只有空白的行、只有定位字元的行

[CKeditor4] 修改特殊字元 CKeditor4 中設定自己想用的特殊字元

[CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小 CKeditor4中要自訂設定區塊樣式、段落格式、字型名稱及字型大小。

[Vue3.js] vue3 運行時出現 Network: unavailable 的解決方法 vue3 運行測試平台時如果需要遠端連線的話怎麼辦？

[CKeditor4] 修改調色盤修改ckeditor預設的調色盤

我有話要說

訪客留言

[無留言]

隨機好文

[jQuery] 利用load()來達成ajax的寫法 jQuery中利用load()來達成ajax的寫法，也有人稱他是假的ajax，作法就是..

[jQuery] select 元件的取值及給值 html中的元件select，在jquery中要如何使用？

UTF-8 BOM (Byte Order Mark) 的問題在 Michael Kaplan 那看到 Every character has a story #4: U+feff

[bc] linux 的計算機 bc 設定小數位數、計算π、次方根 linux 的計算機 bc 設定小數位數、計算π、次方根

[Win7] 燒錄 iso 檔在Windows7 中內建燒錄程式，可以直接把檔案拉到光碟機裡，再執行燒錄。

- 官網
- 設定
範例圖
下載

到最底端