前端技术文档及相关资料下载
关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载！
JQuery带放大缩小功能的灯箱插件Zoomify.js
简介
Zoomify.js是一款JQuery带放大缩小功能的lightboxes插件。
 |
|---|
 |
|---|
（下载的附件中附有DEMO）
Options：
| Property | Type | Default | Description |
|---|---|---|---|
| duration | integer | 200 | Transition duration in milliseconds. |
| easing | string | "linear" | Transition property name. |
| scale | float | 0.9 | If the image is bigger than the size of the page, it represent the maximum zoom scale according to page width/height (from 0 to 1). |
方法：
| Method | Description |
|---|---|
| zoom | Starts a zoom-in or a zoom-out transformation depending on the state of the image. |
| zoomIn | Starts a zoom-in transformation. |
| zoomOut | Starts a zoom-out transformation. |
| reposition | Calculates the correct position of the image and moves it at the center of the visible part of page. |
事件：
| Event | Description |
|---|---|
| zoom-in.zoomify | Fired before each zoom-in transformation. |
| zoom-in-complete.zoomify | Fired after each zoom-in transformation. |
| zoom-out.zoomify | Fired before each zoom-out transformation. |
| zoom-out-complete.zoomify | Fired after each zoom-out transformation. |
使用
1. 引入文件
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/vendor/zoomify/dist/zoomify.min.js"></script>
<link href="css/vendor/zoomify/dist/zoomify.min.css" rel="stylesheet">2. HTML
<div class="wrap">
<img class="zoomify" src="images/img1.jpg" alt="">
</div>3. 调用
$('img.myImage1').zoomify(); // Default settings
$('img.myImage2').zoomify({ duration: 1000 }); // 1s duration相关链接
GitHub 地址 ：https://github.com/indrimuska/zoomify
在线演示 ：https://www.dowebok.com/demo/214/