cImageViewer
所属分类：图片显示
开发工具：JavaScript
文件大小：0KB
下载次数：0
上传日期：2018-11-07 09:27:04
上 传 者：
sh-1993
说明： 图片浏览器,
(Picture browser,)
文件列表:
dest/ (0, 2018-11-07)
dest/cimageviewer.js (17507, 2018-11-07)
example/ (0, 2018-11-07)
example/index.html (3838, 2018-11-07)
gulpfile.js (2365, 2018-11-07)
logo.png (31963, 2018-11-07)
package.json (614, 2018-11-07)
src/ (0, 2018-11-07)
src/cimageviewer.constant.js (1691, 2018-11-07)
src/cimageviewer.core.js (40024, 2018-11-07)
src/cimageviewer.qm.js (4402, 2018-11-07)
# cimageviewer.js - 图片浏览器
## DEMO
## GitHub
## 支持功能
- 支持缩放查看图片
- 支持保存图片到本地
## 文件说明
| 文件 | 描述 |
|-|-|
| cimageviewer.core.js | 核心实现 |
| cimageviewer.constant.js | 常量定义 |
| cimageviewer.qm.js | QQ音乐下载定制封装，实现 save 方法 |
## 初始化
> 不依赖其他第三方库
```html
```
```javascript
var civ = new CIV({
animation: CIV.ANIMATION.TRANSLATE,
background: "#0ff",
list: [
"//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432027858747126350.jpg",
{
src: "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432027474009126350.jpg",
desc: "图片描述"
},
"//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432035906703126350.jpg",
"//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432035984898126350.jpg"
],
onclick: function () {
console.log(this.index); // civ == this
}
}).show();
```
## 初始化参数
| 参数 | 类型 | 默认值 | 描述 |
|-|-|-|-|
| list | Array | \- | 图片列表，参数可以是图片链接或者img标签 |
| index | Number | 0 | 查看的图片序号 |
| loop | Boolean | true | 是否循环查看 |
| orderNumber | Boolean | true | 是否展示图片序号 |
| close | Boolean | true | 是否展示关闭按钮 |
| arrow | Boolean | true | 是否展示左右切换箭头 |
| save | Boolean | false | 是否展示保存按钮 |
| saveBtn | String | "保存图片" | 保存按钮文本 |
| noSave | Boolean | false | 禁用默认保存逻辑 |
| preload | Boolean | false | 是否预加载图片 |
| dots | Boolean | true | 是否展示 |
| background | String | "#000" | 弹窗背景色，默认为黑色 |
| animation | String | "translate" | 切换动画，默认是平移，值在 CIV.ANIMATION 中定义义 |
## CIV对象属性
| 属性名 | 类型 | 值 | 描述 |
|-|-|-|-|
| list | Array | \- | 获取或设置图片列表 |
| index | Number | \- | 获取或设置当前查看的图片 |
| loop | Boolean | \- | 获取或设置循环查看 |
| version | String | \- | 获取组件版本号 |
| close | Boolean | \- | 获取或设置关闭按钮设置 |
| save | Boolean | \- | 获取或设置保存按钮设置 |
| saveBtn | String | \- | 获取或设置保存按钮文本 |
## CIV对象方法
| 方法名 | 描述 |
|-|-|
| show | 打开弹窗 |
| hide | 关闭弹窗 |
| reset | 重置图片缩放状态 |
| prev | 查看上一页 |
| next | 查看下一页 |
## CIV对象事件
| 事件名 | 描述 |
|-|-|
| show | 事件在打开弹窗时触发 |
| hide | 事件在关闭弹窗时触发 |
| slidestart | 事件在开始滑动时触发 |
| slideend | 事件在滑动停止时触发 |
| slidechange | 事件在页面切换时触发 |
| click | 事件在点击图片时触发 |
| save | 事件在保存图片时触发 |
## 常量定义
### 切换动画类型 CLIP.ANIMATION
| 常量 | 值 | 描述 |
|-|-|-|
| CLIP.ANIMATION.TRANSLATE | "translate" | 平移 |
近期下载者：
相关文件：
收藏者：