jquery缩放手势插件_ZooMove：jQuery插件可在悬停时缩放图像

如果您曾经浏览过电子商务网站，则可能会看到图像缩放效果 。 将鼠标悬停在产品照片上，图像的该部分会放大以使视图更清晰 。

ZooMove插件是在您的网站上复制此效果的好方法。 它由jQuery驱动 ，因此无需太多代码即可快速启动并运行。

ZooMove是完全免费的开源软件，可以在GitHub上供任何好奇的开发人员使用。 它可以通过npm ， Bower ， Yarn安装，也可以直接从CDNJS下载。

要设置ZooMove图像，您需要在页面标题中包含三个特定文件 ：

1. jQuery的
2. ZooMove CSS
3. ZooMove JS

如果您想更快地加载页面， 则可以缩小两个ZooMove文件。 您也可以将CSS文件合并到您的主样式表中，这样比较容易。

所有真正的魔术都发生在HTML中，您可以在HTML中为不同的效果设置HTML5 data-* attributes 。

这使您可以基于四个不同的参数来制作自己的自定义缩放效果 ：

1. data-zoo-scale –定义悬停时的总缩放大小 （例如2.0表示200％）
2. data-zoo-move –定义图像是否与光标一起移动
3. data-zoo-over –定义显示在原始图片上方的缩放图像
4. data-zoo-cursor –定义光标点

最后的第五个参数使您可以定义新图像URL应该是什么（如果需要）。

您可以在包括IE9 +在内的所有主要浏览器中使用ZooMove。 该插件得到广泛支持 ，并提供了丰富的用户体验。

如果您正在寻找简单的悬停缩放库， ZooMove是一个很好的选择。 它足够轻巧 ，可以在任何网站上运行，并且由jQuery驱动 ，因此您无需编写太多代码即可使其工作。

访问主页以查看实际运行情况，并查看GitHub上的文档以了解更多信息。

翻译自: https://www.hongkiat.com/blog/jquery-zoomove-zoom-images-hover/