如果您曾经浏览过电子商务网站，则可能会看到图像缩放效果。 将鼠标悬停在产品照片上，图像的该部分会放大以使视图更清晰。
ZooMove插件是在您的网站上复制此效果的好方法。 它由jQuery驱动，因此无需太多代码即可快速启动并运行。
ZooMove是完全免费的开源软件，可以在GitHub上供任何好奇的开发人员使用。 它可以通过npm，Bower，Yarn安装，也可以直接从CDNJS下载。
要设置ZooMove图像，您需要在页面标题中包含三个特定文件：
jQuery的 ZooMove CSS ZooMove JS
如果您想更快地加载页面，则可以缩小两个ZooMove文件。 您也可以将CSS文件合并到您的主样式表中，这样比较容易。
所有真正的魔术都发生在HTML中，您可以在HTML中为不同的效果设置HTML5data-* attributes。
这使您可以基于四个不同的参数来制作自己的自定义缩放效果：
data-zoo-scale–定义悬停时的总缩放大小（例如2.0表示200％）data-zoo-move–定义图像是否与光标一起移动data-zoo-over–定义显示在原始图片上方的缩放图像data-zoo-cursor–定义光标点
最后的第五个参数使您可以定义新图像URL应该是什么（如果需要）。
您可以在包括IE9 +在内的所有主要浏览器中使用ZooMove。 该插件得到广泛支持，并提供了丰富的用户体验。
如果您正在寻找简单的悬停缩放库，ZooMove是一个很好的选择。 它足够轻巧，可以在任何网站上运行，并且由jQuery驱动，因此您无需编写太多代码即可使其工作。
访问主页以查看实际运行情况，并查看GitHub上的文档以了解更多信息。
翻译自: /blog/jquery-zoomove-zoom-images-hover/
