![[代码样式]Zoomify – jQuery缩放效果lightbox插件](https://www.weimahe.com/wp-content/uploads/2020/08/fHKfsV1746.jpg "[代码样式]Zoomify – jQuery缩放效果lightbox插件")
简介
Zoomify 是一款基于的简单带缩放效果的 jQuery lightbox 插件，它使用简单，出来提供基本的属性外，还提供了自动事件和自定义方法，能够满足大多数需求。
浏览器兼容
![[代码样式]Zoomify – jQuery缩放效果lightbox插件](https://www.weimahe.com/wp-content/uploads/2020/08/myJcfT1694.png "[代码样式]Zoomify – jQuery缩放效果lightbox插件"){kind=small} |
![[代码样式]Zoomify – jQuery缩放效果lightbox插件](https://www.weimahe.com/wp-content/uploads/2020/08/6vuYXS1729.png "[代码样式]Zoomify – jQuery缩放效果lightbox插件"){kind=small} |
![[代码样式]Zoomify – jQuery缩放效果lightbox插件](https://www.weimahe.com/wp-content/uploads/2020/08/sKKNqV1694.png "[代码样式]Zoomify – jQuery缩放效果lightbox插件"){kind=small} |
![[代码样式]Zoomify – jQuery缩放效果lightbox插件](https://www.weimahe.com/wp-content/uploads/2020/08/3dMJ071694.png "[代码样式]Zoomify – jQuery缩放效果lightbox插件"){kind=small} |
![[代码样式]Zoomify – jQuery缩放效果lightbox插件](https://www.weimahe.com/wp-content/uploads/2020/08/J1fEzh1694.png "[代码样式]Zoomify – jQuery缩放效果lightbox插件"){kind=small} |
![[代码样式]Zoomify – jQuery缩放效果lightbox插件](https://www.weimahe.com/wp-content/uploads/2020/08/mUTY3d1694.png "[代码样式]Zoomify – jQuery缩放效果lightbox插件"){kind=small} |
|---|---|---|---|---|---|
| IE10+ ✔ | Edge ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
使用方法
1、引入文件
<link rel="stylesheet" href="https://www.dowebok.com/css/zoomify.min.css" rel="external nofollow" > <script src="https://www.dowebok.com/js/jquery.min.js"></script> <script src="https://www.dowebok.com/js/zoomify.min.js"></script>
2、HTML
<img class="zoomify" src="https://www.dowebok.com/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 | 缩小后的事件 |
GitHub 地址：https://github.com/indrimuska/zoomify
[b2_file link="
百度网盘" name="Zoomify – jQuery缩放效果lightbox插件" pass="" code=""]
