当前位置:JS特效 » 图片效果 » zoomove-jQuery图片内部放大和移动插件
 zoomove-jQuery图片内部放大和移动插件
如果您觉得内容不错,请分享:

插件介绍

zoomove是一款可以在鼠标滑过图片时在图片内部放大图片并移动的jQuery插件。zoomove使用简单,可以通过配置参数来控制图片的放大倍数和是否跟随鼠标移动等。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:63
简要教程

zoomove是一款可以在鼠标滑过图片时在图片内部放大图片并移动的jQuery插件。zoomove使用简单,可以通过配置参数来控制图片的放大倍数和是否跟随鼠标移动等。

安装

可以通过bower或npm来安装在zoomove图片放大插件。

$ npm install zoomove --save
$ bower install zoomove --save                  
                

使用方法

在页面中引入zoomove.min.css和jquery、zoomove.min.js文件。



                  
                
HTML结构

可以使用

元素来作为图片的容器。

初始化插件

在页面DOM元素加载完毕之后,可以通过ZooMove()方法来初始化该图片放大插件。

$('.zoo-item').ZooMove();                
                

配置参数

参数 默认值 描述
zoo-image -- 要进行放大的图片的URL地址。
zoo-scale 1.5 (150%) 设置图片放大的倍数。
zoo-move true 图片在鼠标移动时是否跟随移动。
zoo-over false 设置图片放大后是否超出原图片的范围。
zoo-cursor false 设置鼠标样式是pointer还是default。

可以在HTML中通过属性来使用这些配置参数。


也可以使用js来进行初始化。


                  
                

应用举例

在demo中的3种图片放大效果的HTML代码分别如下:

图片1:

图片2:

图片3:

zoomove图片放大插件的github地址为:https://github.com/thompsonemerson/zoomove

Top