图片内部缩放和平移展示插件jquery.zoom.js

使用方法：

可以通过npm来安装jquery.zoom.js插件。

npm install jquery-zoom

在页面中引入jQuery库文件和jquery-zoom.js文件。

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-zoom.js"></script>

初始化插件、参数配置

在DOM元素加载完毕之后，通过zoom()方法来初始化该插件。

$(document).ready(function(){
  $('a.photo').zoom({url: 'photo-big.jpg'});
});
 
// 或者通过 Colorbox 来放大图片
$(document).ready(function(){
  $('a.photo').zoom({
    url: 'photo-big.jpg', 
    callback: function(){
      $(this).colorbox({href: this.src});
    }
  });
});

要使图片可以被放大，必须将图片包裹在一个容器中，你可以通过js代码来为图片动态添加容器，例如：

$(document).ready(function(){
  $('img')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom();
});

可以通过下面的方法来移除图片的放大效果：

$('#example').zoom(); // 添加图片放大效果
$('#example').trigger('zoom.destroy'); // 移除图片放大效果

HTML结构

可使用<a>、<span>、<li>和<div>等元素来包裹图片。

<span class='zoom' id='ex1'>
  <img src='img/design.jpg' width='555' height='320' alt='web design'/>
  <p>Hover</p>
</span>

jquery.zoom.js插件的可用配置参数有：