图片/图形
zoomove - 图片内部放大移动jQuery插件
PetitQ
zoomove 是一款可以在鼠标滑过图片时在图片内部放大图片并移动的 jQuery 插件。zoomove 使用简单，可以通过配置参数来控制图片的放大倍数和是否跟随鼠标移动等。
使用方法
在页面中引入 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 -->
<figureclass="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>
Github 地址：https://github.com/thompsonemerson/zoomove
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
