简介
Zoomify 是一款基于的简单带缩放效果的 jQuery lightbox 插件，它使用简单，出来提供基本的属性外，还提供了自动事件和自定义方法，能够满足大多数需求。
浏览器兼容
|
|
|
|
|
|
|
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、事件
演示地址：https://www.dowebok.com/demo/214/
用心去打造出中国最独具特色的资源网站，用每一滴汗水换回所有付出所得的喜悦！
建站技术分享网
发表评论