jQuery Zoom:圖片放大插件、在指定大小內原始比例呈現圖片大小

2019/01/26 442 網站技術 , HTML , CSS , JavaScript , jQuery

其實很早以前就用過類似的插件,只不過那個插件是商業授權的試用版,而且在改版的過程中還出錯,因此我就直接放棄使用了!後來在網路上找到這個功能更優的 jQuery 插件,支援 touch (觸控)、click (點擊) 和 mouseover (游標偵測) 三種條件來使方法(function)執行(啟動放大圖片的功能),也就是說行動裝置也適用唷!

「jQuery Zoom」由 Jack Moore 開發,採用 MIT 授權,可免費使用於自己的網站上。

▲ 官方網站截圖,這邊都有 Demo。

▲ 載點也都在官方網站上。

這邊稍微提一下安裝方式,首先要在 </head> 前放入:(path 為您指定的路徑)

<script src="path/jquery.zoom.min.js"></script>

然後在下載的檔案中有「demo.html」,裡面的 <style> 標籤內有需要的 CSS 碼記得要複製到自己的網頁使用,這邊都可以自訂!
</body> 前記得要加上:(.zoom-img 為您指定的 DOM 目標)

// Zoom 開始
$(document).ready(function(){
$('.zoom-img').zoom();
});
// Zoom 結束

官方網站提供了很多參數可以加入到以上的 JS 中,讓插件更符合您的需求。

贊助廣告 ‧ Sponsor advertisements
徵信社服務電話| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社電話幾號| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢專線| 馭夫術手段| 設計離婚服務| 男友感情挽回| 包二奶氾濫| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 國際徵信公司|
【業界首推立達徵信FB