推荐一款jquery前端插件（zoomify），灯箱效果插件（用于图片看大图的效果），简单易用！

前段时间项目中，需要使用图片看大图的效果，主要是用于上传的企业工商执照等信息。这个时候的需求是希望放大图片，看到大图。在进行认真调研基础上发现了一款极好用、极简单的前端插件 zoomify，下面简单介绍一下这款插件的使用。

基本用法：

Zoomify 是一款基于的简单带缩放效果的 jQuery lightbox 插件，它使用简单，出来提供基本的属性外，还提供了自动事件和自定义方法，能够满足大多数需求

 

1、引入文件

<link rel="stylesheet" href="css/zoomify.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/zoomify.min.js"></script>

2、HTML

<img class="zoomify" src="images/img1.jpg" alt="">

3、JavaScript

$('.zoomify').zoomify();

配置

1、属性

名称	类型	默认值	说明
duration	整数	200	动画持续时间
easing	字符串	linear	动画持续时间
scale	整数/浮点数	0.9	图片最大缩放比例

2、方法

名称	说明	举例
zoom	放大或缩小	$(‘.zoomify’).zoomify(‘zoom’);
zoomIn	放大	$(‘.zoomify’).zoomify(‘zoomIn’);
zoomOut	缩小	$(‘#myImage’).zoomify(‘zoomOut’);
reposition	重新调整	$(‘#myImage’).zoomify(‘reposition’);

3、事件

名称	说明
zoom-in.zoomify	放大前的事件
zoom-in-complete.zoomify	放大后的事件
zoom-out.zoomify	缩小前的事件
zoom-out-complete.zoomify	缩小后的事件