jQuery Zoom:圖片放大插件、在指定大小內原始比例呈現圖片大小
2019/01/26
萌芽站長
3,342 2
網站技術 , 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
CSS:CSS總介紹
📆 2013-01-01
📁
網站技術, CSS
HTML Image Map 影像地圖 jQuery 推薦插件:maphilight (加強特效)、rwdImageMaps (支援RWD)
📆 2018-11-01
📁
網站技術, HTML, JavaScript, jQuery
Node.js:處理多層目錄檔案(Gulp、mozjpeg 批次圖片壓縮 - 延伸篇)
📆 2019-03-30
📁
多媒體, 網站技術, JavaScript, Node.js, 靜圖處理, Gulp
使用 Docker 更新 Node-RED 教學
📆 2021-12-08
📁
網站技術, 物聯網, Node.js, Node-RED
PHP & AJAX & MySQL 即時搜尋系統、邊打字邊搜尋資料庫
📆 2019-06-18
📁
網站技術, 資訊安全, 伺服器, 資料庫, PHP, JavaScript, jQuery, SQL
JSP:nxn 乘法表(nxn_multiplication_table.jsp)
📆 2019-03-27
📁
網站技術, HTML, JSP
Bootstrap 介紹與入門,Bootstrap 5 跟 Bootstrap 3 & 4 的差別
📆 2021-10-27
📁
網站技術, HTML, Bootstrap
CSS:網頁檔簡化,將CSS取出成獨立檔案!
📆 2013-01-01
📁
網站技術, CSS
留言區 / Comments
萌芽論壇