资源分类

jquery.zoom.js是一款非常实用的图片内部缩放和平移jQuery插件。该插件可以鼠标滑过图片，点击图片或移动手机上触摸图片时，将图片进行放大或平移操作。  

jquery.zoom.js 使用 

1、安装或引入

npm install jquery-zoom

或

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

2、html

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

3、初始化

$(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();
});

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/283