• jquery-zoom是基于jquery的插件,使用前需要引入jquery。
  • 官方网址:jQuery Zoom
  • 兼容性:Chrome,Firefox,Safari,Opera,IE 7+
  • 基于jQuery 1.7+

基本用法

  • 基于jquery,先引用jquery;

  • 引入jquery-zoom:

    <script src="../../js/1.8.3/jquery.min.js"></script>
    <script src="jquery.zoom.js"></script>
    
  • 调用方法:

    • 直接方法该元素
    $(function(){
      $('#ex1').zoom();//默认,鼠标移上直接放大
      $('#ex2').zoom({ on:'grab' });//按住鼠标时才放大
      $('#ex3').zoom({ on:'click' });//点击后放大了		 
      $('#ex4').zoom({ on:'toggle' });//点击后放大,再次点击缩小。
    });
    
    • 图片的父级进行放大:
    $(function(){
      $('img')
        .wrap('<span style="display:inline-block"></span>')
        .css('display', 'block')
        .parent()
        .zoom();
    });
    
  • 参数设置

属性 默认值 描述
url false 要显示的大型照片的网址。如果没有提供url,zoom将使用分配给它的元素内的第一个子IMG元素的src
on ‘mouseover’ 触发缩放的事件类型。选择mouseovergrabclick,或toggle
duration 120 fadeIn / fadeOut的大图像速度。
target false 应该用作缩放图像的父容器的选择器或DOM元素。
touch true 通过触摸事件启用交互。
magnify 1 该值与缩放图像的全尺寸相乘。默认值为1,表示缩放图像应为其自然宽度和高度的100%。
callback false 当图像加载时要调用的函数。在函数内部,this引用图像元素。
onZoomIn false 当图像放大时要调用的函数。在函数内部,this引用图像元素。
onZoomOut false 当图像缩小时要调用的功能。在函数内部,this引用图像元素。
  • 删除方法,触发zoom.destroy事件以从元素中移除缩放:
$('#example').zoom(); // add zoom
$('#example').trigger('zoom.destroy'); // remove zoom

详见 demo

以上文章来自:黄卉 , https://huanghui8030.github.io/jquery/jquery-zoom.html