zoomove是一款可以在鼠标滑过图片时在图片内部放大图片并移动的jQuery插件。zoomove使用简单,可以通过配置参数来控制图片的放大倍数和是否跟随鼠标移动等。
安装
可以通过bower或npm来安装在zoomove图片放大插件。
$ npm install zoomove --save $ bower install zoomove --save
使用方法
在页面中引入zoomove.min.css和jquery、zoomove.min.js文件。
<link rel="stylesheet" href="zoomove.min.css"> <script src="jquery.min.js" type="text/javascript"></script> <script src="zoomove.min.js" type="text/javascript"></script>
HTML结构
可以使用<figure >
或<img >
元素来作为图片的容器。
<figure class="zoo-item" zoo-image="img/example.jpg"></figure>
初始化插件
在页面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中通过属性来使用这些配置参数。
<!-- HTML Element --> <figure class="zoo-item" zoo-image="[value]" zoo-scale="[value]" zoo-move="[value]" zoo-over="[value]" zoo-cursor="[value]" > </figure>
也可以使用js来进行初始化。
<!-- JavaScript --> <script> $('.zoo-item').ZooMove({ image: '[value]', scale: '[value]', move: '[value]', over: '[value]', cursor: '[value]' }); </script>
应用举例
在demo中的3种图片放大效果的HTML代码分别如下:
图片1:
<figure class="zoo-item" zoo-image="img/example.jpg"></figure>
图片2:
<figure class="zoo-item" zoo-image="img/example.jpg" zoo-scale="3"></figure>
图片3:
<figure class="zoo-item" zoo-image="img/example.jpg" zoo-over="true" zoo-move="false"></figure>
zoomove图片放大插件的github地址为:https://github.com/thompsonemerson/zoomove。