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
