JS-jQuery Zoom 使用

发表于 分类于

本文介绍如何使用 Jquery Zoom 放大图片。

基本使用

1
2
3
<!-- jQuery Required 1.7+ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>

<img> 标签需置于某个合法的 HTML 标签内，如 <div> <figure> ... ， 而使用 zoom() 的元素应该是 <img> 的 Parent Elemnt 。

启用 zoom：

1
2
3
<figure id="example">
    <img src="https://example.com/example.png" />
</figure>
1
2
3
4
5
6
7
8
9
10
/* 最简单的启用方式 */
$('#example').zoom();

/* 通常需要配置 zoom 参数 */
$('#example').zoom({
    property1: value1, 
    property2: value2,
    ... 
    propertyN: valueN
});

禁用 zoom

以下是zoom的禁用方式。

1
$('#example').trigger('zoom.destroy');

比如你可以使用一个checkbox来控制zoom的启用和关闭。

1
2
3
4
5
6
7
8
9
10
11
12
$("input:checkbox").change(function(){
  if ($("input:checked").length > 0) {
    $('#example').trigger('zoom.destroy'); 

  }
  else {
   	$('#example').zoom({

        magnify: 2
    }); 
  }
})

属性值配置

url

zoom 图片源。

值 ： false | URL

默认取 <img> 中的 src 作为放大图片源。当填写具体 url 时将取该 url 作为放大图片源。

使用时可以将像素较低的图片放在 <img src=""> 中，像素较高的放在 zoom 属性中。

1
2
3
$('#example').zoom({
    url: "https://example.com/example.png"
});

on

触发 zoom 的方式。

  • 'mouseover': 默认值，鼠标经过时放大；
  • 'grab' ：鼠标左键保持按下时放大点击的地方，挪出图片区域或松开后复原；
  • 'click' : 鼠标左键点击后保持放大状态，经过时放大经过地方，挪出图片区域保持放大, 跟随鼠标移动的动作放大图片，再次点击后复原；
  • 'toggle'：仅放大鼠标左键点击的地方，再次点击时复原。

建议使用不同触发事件时配合使用不同的 cursor CSS 样式 作为指示。

duration

渐入渐出时，数值越大渐出越缓慢，默认为120。

内部调用的是 jQuery 的 .fadeTo() ，单位是毫秒。

1
2
3
$('#example').zoom({
    duration: 1000
});

target

CSS Selector. 通过设定该属性，可以使图片不在原图片显示区域放大，而在选定的 HTML Element 上呈现放大图像，原图像保持不变。

下面的代码将会把放大的图像显示在 id 为 myTarget 的 div 中，而原来的图像保持不变。

1
2
3
4
<figure id="example">
    <img src="https://example.com/example.png" />
</figure>
<div id="myTarget"></div>
1
2
3
$('#example').zoom({
    target: '#myTarget'
});

touch

是否启用 touch events, 默认启用。

magnify

放大倍数。默认值为1，即不放大。

1
2
3
$('#example').zoom({
    magnify: 2
});

callback/onZoomIn/onZoomOut

三个属性用法一样：

  • callback ：图片加载完成后的回调函数
  • onZoomIn ：图片放大时调用的函数
  • onZoomOut ：图片复原时调用的函数

下面代码将在图片放大时将测试文本变为红色，图片恢复时将测试文本变为黑色。

1
2
3
4
5
6
7
8
$('#example').zoom({
    onZoomIn: function() {
        $('#testZoomStatus').css('color', 'red');
  }, 
    onZoomOut: function() {
        $('#testZoomStatus').css('color', 'black');     
  }
});

参考资料

jQuery Zoom