Magnifier實(shí)現(xiàn)一個(gè)圖片放大鏡的效果，可應(yīng)用于商品圖片頁等對圖片細(xì)節(jié)要求高的地方，使用jQuery插件magnifier可以簡單的實(shí)現(xiàn)一個(gè)圖片放大鏡的功能。
可以使用鼠標(biāo)滾輪放大縮小圖片。
可以通過js或data屬性來設(shè)置選項(xiàng)。
一次調(diào)用可以附加多張圖片。
用戶可以自定義鼠標(biāo)進(jìn)入、離開、移動事件。
加載大圖片時(shí)可以顯現(xiàn)等待文本。
瀏覽器支持
Chrome 24
Firefox 18
IE 7, 8, 9, 10
Safari for Windows 5.1.7
演示示例：http://photino.github.io/amazeui-magnifier/docs/demo.html
可以使用鼠標(biāo)滾輪放大縮小圖片。
可以通過js或data屬性來設(shè)置選項(xiàng)。
一次調(diào)用可以附加多張圖片。
用戶可以自定義鼠標(biāo)進(jìn)入、離開、移動事件。
加載大圖片時(shí)可以顯現(xiàn)等待文本。
瀏覽器支持
Chrome 24
Firefox 18
IE 7, 8, 9, 10
Safari for Windows 5.1.7
演示示例：http://photino.github.io/amazeui-magnifier/docs/demo.html
基本使用方法
首先引入css文件
<link rel="stylesheet" type="text/css" href="magnifier.css"> |
<div> <a class="magnifier-thumb-wrapper" href="big.jpg"> <img id="thumb" src="thumb.jpg"> </a> <div class="magnifier-preview" id="preview" style="width: 200px; height: 133px">Starry Night Over The Rhone<br>by Vincent van Gogh</div></div> |
調(diào)用插件
引入js文件
<script type="text/javascript" src="Event.js"></script><script type="text/javascript" src="Magnifier.js"></script> |
<script type="text/javascript"> var evt = new Event(), m = new Magnifier(evt); m.attach({ thumb: '#thumb', large: 'big.jpg', largeWrapper: 'preview'});</script> |
可用參數(shù)
- thumb(string):ID or class of the image element to magnify preceded by "#" or "."
- large(string):large image URL
- largeWrapper(string):ID of the element where large image will be appended
- zoom(int):initial zoom level
- zoomable(bool):enable zoom in / out using mouse wheel
- onthumbenter(callback):function to call on thumbnail enter event
- onthumbmove(callback):function to call on thumbnail move event
- onthumbleave(callback):function to call on thumbnail leave event
- onzoom(callback):function to call on zoom event
鄂公網(wǎng)安備 42090202000212號