Word,PPT 文档预览组件(图片预览组件)
移动端请移步 MPreview.mobile
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 --><linkrel="stylesheet" href="css/MPreview.css"><!-- require js --><scripttype="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script><scripttype="text/javascript" src="js/MPreview.js"></script><!-- html --><divclass="doc" id="doc"></div><scripttype="text/javascript">$('#doc').MPreview({url: 'api.php?action=doc&callback=?'});</script>$('#doc').MPreview({url: 'api.php?action=doc&callback=?',//url中包含callback则表示跨越请求,具体可参考$.getJSON();data: null,//包含所有图片地址的数组,如填写则不发送Ajax。用于直接传入数据,方便调用。offset: 100,//每次滚动偏移多少像素,默认 100pxloadSize: 5,//每次加载几张图片pageFix: 50,//当前页数判定的衡量标准scrollFix: 5,//当前默认滚动条距离外容器的边距minScrollHeight: 20//当前滚动条按钮最小高度});//关于 data 参数的用法vardata=['upload/1.jpg','upload/2.jpg','upload/3.jpg'];$('#doc').MPreview({data: data});$('#ppt').MPreviewPPT({url: 'api.php?action=doc&callback=?',//url中包含callback则表示跨越请求,具体可参考$.getJSON();data: null,//包含所有图片地址的数组,如填写则不发送Ajax。用于直接传入数据,方便调用。loadSize: 5,//每次加载几张图片scrollFix: 5,//当前默认滚动条距离外容器的边距minScrollHeight: 20//当前滚动条按钮最小高度});//关于 data 参数的用法vardata=['upload/1.jpg','upload/2.jpg','upload/3.jpg'];$('#ppt').MPreviewPPT({data: data});Blog:http://webjyh.com Weibo:http://weibo.com/webjyh/