「自学哈网」jQuery插件Magnifier图片放大器-自学哈网

Magnifier实现了图片放大镜的效果。它可以用在对细节要求较高的地方，如产品图片页面。jQuery插件Magnifier可以用来简单地实现一个图像放大镜的功能。

可以使用鼠标滚轮放大缩小图片。

可以通过js或data属性来设置选项。

一次调用可以附加多张图片。

用户可以自定义鼠标进入、离开、移动事件。

加载大图片时可以显现等待文本。

浏览器支持

Chrome 24

Firefox 18

IE 7, 8, 9, 10

Safari for Windows 5.1.7

演示示例：234547205.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