Magnifier实现了图片放大镜的效果。它可以用在对细节要求较高的地方，如产品图片页面。jQuery插件Magnifier可以用来简单地实现一个图像放大镜的功能。
可以使用鼠标滚轮放大缩小图片。
可以通过js或data属性来设置选项。
一次调用可以附加多张图片。
用户可以自定义鼠标进入、离开、移动事件。
加载大图片时可以显现等待文本。
浏览器支持
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 > |
调用插件
引入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> |
可用参数
- 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
更多信息请参看：https://github.com/mark-rolich/Magnifier.js
