[精讚] [會員登入]
3005

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標籤可帶一個圖片,也可以不帶就用原圖

<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>

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

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

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

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

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

範例圖

HTML

<img src='image.png' />

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

你可能感興趣的文章

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

正則表達式:Email名稱防止連續輸入點(.)及下底線(_) Email的名稱中要允許特殊符號,但又不允許連續出現的正則表達式

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

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

Jquery 圖片放大的工具:放大鏡 想讓網頁上的圖片局部放大,有沒有簡單好用的 jquery?

[Javascript] 陣列、陣列的操作 Javascript 的陣列操作:宣告、取值、賦值、插入或移除項目,檢查KEY、檢查是否為陣列等等

隨機好文

[MAC] 截取螢幕畫面的方法 截取螢幕畫面的方法,在MAC中叫作螢幕快照,英文是screenshot

[Freebsd] 定時測試 ADSL 是否斷線並重連 中華電信 ADSL 雖有固定 ip,可是他卻會不定時「斷線」, 使用以下的 方法可以定時測試是否斷線,以及重新撥接。

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

[AS3] 物件加上超連結的方法 物件加上超連結,可讓使用者點擊的方法

兩次使用InnoDB的慘痛經驗 Mysql 的Innodb引擎雖然好用,但是我得說說我兩次的慘痛經驗,這讓我考慮以後可能不會再使用innodb了