Zoomify – jQuery缩放效果lightbox插件
分类:代码
日期:
点击(103,845)
![Zoomify - jQuery缩放效果lightbox插件](https://img.dowebok.com/214.jpg)
演 示
简介
Zoomify 是一款基于的简单带缩放效果的 jQuery lightbox 插件,它使用简单,出来提供基本的属性外,还提供了自动事件和自定义方法,能够满足大多数需求。
浏览器兼容
![IE](https://img.dowebok.com/ie.png) |
![Edge](https://img.dowebok.com/edge.png) |
![Chrome](https://img.dowebok.com/chrome.png) |
![Firefox](https://img.dowebok.com/firefox.png) |
![Opera](https://img.dowebok.com/opera.png) |
![Safari](https://img.dowebok.com/safari.png) |
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、事件
GitHub 地址:https://github.com/indrimuska/zoomify