Zoomify实现图片点击放大(显示原图)功能
就是下面这个效果：
Zoomify，GitHub地址：https://github.com/indrimuska/zoomify
要是习惯看英文，可以直接看GitHub，写的很清楚，不想看英文，就接着往下看
使用
GitHub下载后把dist文件夹下的两个文件放入项目静态文件夹
(还需要引入jQuery)
<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">
调用
$('img.myImage1').zoomify(); // 默认参数，回调相当于toggle
$('img.myImage2').zoomify({ duration: 1000 }); // 过度持续1秒zoomify()属性可选值
| 属性 | 值类型 | 默认值 | 描述 |
|---|---|---|---|
| duration | 整数 | 200 | 过度持续的毫秒数 |
| easing | 字符串 | "linear" | 过度样式名称 |
| scale | 浮点数 | 0.9 | 如果图像大于页面的大小，图像相对页面宽度/高度的最大缩放尺度(从0到1) |
举例
$('img.myImage2').zoomify({ duration: 3000，scale：0.6 }); // 过度持续1秒，最大60%zoomify()可选方法
| 事件 | 描述 |
|---|---|
| zoom | 根据图片状态执行放大或缩小（相当于toggle） |
| zoomIn | 缩小图片 |
| zoomOut | 放大图片 |
| reposition | 计算图片位置并将其移动到页面可见位置 |
举例
$('img.myImage2').zoomify("zoomIn"); //执行缩小图片zoomify()可选事件（事件回调）
| 事件 | 描述 |
|---|---|
| zoom-in.zoomify | 图片缩小前执行 |
| zoom-in-complete.zoomify | 图片缩小后执行 |
| zoom-out.zoomify | 图片放大前执行 |
| zoom-out-complete.zoomify | 图片放大后执行 |
$('#myImage').on('zoom-in.zoomify', function () {
// do something...
});摘自：飞行猿博客 https://www.hzfblog.com
0顶
0 踩
共 0 条评论