简介
jquery-zoom 是一个基于 jQuery 的图片缩放插件，可以方便地实现鼠标悬停在图片上时进行放大的效果。本文将详细介绍如何使用 jquery-zoom 插件，并提供示例代码。
安装
要使用 jquery-zoom 插件，需要先安装它。可以通过 npm 安装：
--- ------- -----------
也可以通过 CDN 直接引入：
------- --------------------------------------------------------------------------------
使用方法
安装完成后，在 HTML 文件中引入 jQuery 和 jquery-zoom 插件：
------- ----------------------------------------------------------- ------- --------------------------------------------------------------------------------
然后，在 JavaScript 中调用 zoom 方法即可实现图片放大效果：
---------------------------- - ---------------------- ---
其中，#my-image 是需要进行缩放的图片元素的选择器。
配置选项
jquery-zoom 插件还提供了一些配置选项，可以通过传入参数来进行设置。以下是常用的配置选项及其说明：
| 配置选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| url | string | "" | 放大图片的 URL |
| callback | function | $.noop | 缩放完成后的回调函数 |
| duration | number | 120 | 动画持续时间，单位为毫秒 |
| on | string | "mouseover" | 触发缩放的事件类型 |
例如，要设置默认显示的放大图片为 large-image.jpg，可以这样做：
---------------------------- -
---------------------
---- -----------------
---
---示例代码
以下是一份完整的示例代码，包括 HTML、CSS 和 JavaScript：
--------- -----
------
------
----- ----------------
------------- ---- ------------
-------
--------- -
------ ------
------- ------
-
--------
------- -----------------------------------------------------------
------- --------------------------------------------------------------------------------
--------
---------------------------- -
---------------------
---- ------------------
--------- ----
--- -----------
---
---
---------
-------
------
---- ------------- ----------------------
-------
-------其中，small-image.jpg 是默认显示的小图片，large-image.jpg 是放大后显示的大图片。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/35119