一、zoomfiy.js
使用說明:
使用該jquery 插件
引入該插件的js:zoomfiy.js 或 min
引入該插件的css:zoomfiy.css 或 min
前后順序都可
js里加入 調用插件的函數 $('這里寫要放大的圖片').zoomify();
如果有ajax 新生成的圖片,要在ajax里再次調用一遍該函數。
二、zoomooz.js
使用說明:
這個插件有很多種 放大功能,可進行優雅的縮放操作,特別適用相冊網站。這個圖片方法不是 單獨圖片跳脫出來的放大,而是點擊該圖片區域,這個區域的頁面整體放大,有時候會導致放的的區域不准的情況。點擊圖片其他部分可以回到要放大的內容之前的狀態,效果很炫酷。
必須引用一定有jquery和zoomooz.js
給要放大的元素加 class="zoomTarget"
即可實現簡單的放大功能,
如果實現更加復雜的功能,
要在他的父級等標簽上繼續加 不同的class ,加一些js ,具體參見說明文檔
以上兩個插件是我試過眾多插件中最好用最簡單的,還有許多其他圖片放大插件,有興趣的朋友可以學習下。
比如:
swipebox
該插件好處:有具體的使用說明文檔,貌似是要給點擊的圖片加一個a標簽,在a標簽上加相應的class。
zoom.js
該插件使用起來非常簡單,直接給需要放大的圖片加一個 data-action="zoom"即可,但是很多時候會報錯:Cannot read property 'end' of undefined 和 Cannot read property '0' of undefined
具體報錯原因,目前還不明白,在本身項目結構復雜的時候應用最容易出現該錯誤,導致圖片點擊出現一點小小的Bug.
缺點:沒有幫助文檔,網上搜不到相關帖子
優點:適用於簡單頁面的圖片放大,效果棒!
fancybox
該插件功能齊全,值得研究