Magnifier是一款实用纯js制作的图片放大镜插件。它有以下一些特定：

  • 可以使用鼠标滚轮放大缩小图片。
  • 可以通过js或data属性来设置选项。
  • 一次调用可以附加多张图片。
  • 用户可以自定义鼠标进入、离开、移动事件。
  • 加载大图片时可以显现等待文本。

浏览器支持

  • Chrome 24
  • Firefox 18
  • IE 7, 8, 9, 10
  • Safari for Windows 5.1.7

基本使用方法

首先引入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