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