Zoomify – jQuery缩放效果lightbox插件

分类:代码 日期:

Zoomify - jQuery缩放效果lightbox插件

演 示

简介

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

浏览器兼容

IE Edge Chrome Firefox Opera Safari
IE10+ ✔ Edge ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

使用方法

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 缩小后的事件

GitHub 地址:https://github.com/indrimuska/zoomify

查看演示

下载本素材需消耗 50 积分

无法下载?立即反馈