MPreview.js
Word，PPT 文档预览组件（图片预览组件）
移动端请移步 MPreview.mobile
Demo参考
http://demo.webjyh.com/MPreview/
特此说明
此插件是我在项目开发中而制作，其只适用于其项目，如须使用须注意，提供的图片须有较大的宽高。
插件说明
- 此插件需要由服务端提供转换好的Word图片或PPT图片来进行预览。
- 插件需要 jQuery1.9+ 库。支持IE7+，FireFox，Chrome。
- 初始化调用插件的外容器，只需设置宽高样式即可，无需其它设置。
- 因插件是刚开始阶段，一些功能并未能完善全，如：放大，缩小功能。
- 插件中一些滚动的计算是硬算出来的(勿喷)。
插件特性
- 服务端将全数据返回(图像地址的数组集合)，由插件进行分割加载。
- 支持滚动条拖拽滚动及全屏预览。
- 支持上一页，下一页功能。
目录结构说明
MPreview/
├── css/
│ ├── base.css (重置样式)
│ └── MPreview.css (插件所需样式)
├── images/
│ ├── loading.gif (加载图片等待动画)
│ └── media_icon.png (插件所需的icon)
├── js/
│ ├── MPreview.js (Word版 js)
│ └── MPreviewPPT.js (PPT版 js)
├── upload/
│ ├── MPreview_DOC_1.jpg (测试图片)
│ └── MPreview_PPT_1.jpg
├── api.php (数据请求的演示地址)
├── data.json (请求所返回的数据格式)
├── index.html (Word版 Demo)
└── PPT.html (PPT版 Demo)
PS: 务必一次性返回所有图片地址，插件将自动分割加载
如何使用
<!-- require css -->
<link rel="stylesheet" href="css/MPreview.css">
<!-- require js -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/MPreview.js"></script>
<!-- html -->
<div class="doc" id="doc"></div>
<script type="text/javascript">
$('#doc').MPreview({ url: 'api.php?action=doc&callback=?' });
</script>MPreview.js (Word 版) 参数说明
$('#doc').MPreview({
url: 'api.php?action=doc&callback=?', //url中包含callback则表示跨越请求，具体可参考$.getJSON();
data: null, //包含所有图片地址的数组，如填写则不发送Ajax。用于直接传入数据，方便调用。
offset: 100, //每次滚动偏移多少像素，默认 100px
loadSize: 5, //每次加载几张图片
pageFix: 50, //当前页数判定的衡量标准
scrollFix: 5, //当前默认滚动条距离外容器的边距
minScrollHeight: 20 //当前滚动条按钮最小高度
});
//关于 data 参数的用法
var data = ['upload/1.jpg','upload/2.jpg','upload/3.jpg'];
$('#doc').MPreview({ data: data });MPreviewPPT.js (PPT 版) 参数说明
$('#ppt').MPreviewPPT({
url: 'api.php?action=doc&callback=?', //url中包含callback则表示跨越请求，具体可参考$.getJSON();
data: null, //包含所有图片地址的数组，如填写则不发送Ajax。用于直接传入数据，方便调用。
loadSize: 5, //每次加载几张图片
scrollFix: 5, //当前默认滚动条距离外容器的边距
minScrollHeight: 20 //当前滚动条按钮最小高度
});
//关于 data 参数的用法
var data = ['upload/1.jpg','upload/2.jpg','upload/3.jpg'];
$('#ppt').MPreviewPPT({ data: data });联系作者
Blog：http://webjyh.com Weibo：http://weibo.com/webjyh/