Magnifier实现了图片放大镜的效果。它可以用在对细节要求较高的地方，如产品图片页面。jQuery插件Magnifier可以用来简单地实现一个图像放大镜的功能。
可以使用鼠标滚轮放大缩小图片。
可以通过js或data属性来设置选项。
一次调用可以附加多张图片。
用户可以自定义鼠标进入、离开、移动事件。
加载大图片时可以显现等待文本。
浏览器支持
Chrome 24
Firefox 18
IE 7, 8, 9, 10
Safari for Windows 5.1.7
演示示例：code codebig.jpg”> <imgid="thumb"src="thumb.jpg"> </a> <divclass="magnifier-preview"id="preview"style="width: 200px; height: 133px">Starry Night Over The Rhone<br>by Vincent van Gogh</div></div>
调用插件
引入js文件
<scripttype="text/javascript"src="Event.js"></script><scripttype="text/javascript"src="Magnifier.js"></script> |
<script type="text/javascript"> varevt = newEvent(), m = newMagnifier(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
文章来源网络，作者：运维，如若转载，请注明出处：https://shuyeidc.com/wp/115132.html<
