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 });
MPreview.js的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- js学习笔记:操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- JS正则表达式常用总结
正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...
- 干货分享:让你分分钟学会 JS 闭包
闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...
随机推荐
- easyUI的combobox设置隐藏和显示
今天遇到一个需求,需要在combobox选择不同选项时,分别切换另一个控件为text或者combobox. 当时想了各种办法,想将combobx和text切换隐藏,但是都没得到自己想要的效果.最终还是 ...
- NPOI之使用EXCEL模板创建报表
因为项目中要用到服务器端创建EXCEL模板 无法直接调用EXCEL 查了下发现NPOI很方便很简单就实现了 其中走了点弯路 第一次弄的时候发现输出的值是文本不是数字型无法直接计算公式 然后又发现打开报 ...
- bad interpreter: No such file or directory
经常会遇到这种情况,在windows下写的脚本,代码会在linux下无法执行,错误就是: bad interpreter: No such file or directory 1.原因 这通常都是由于 ...
- [HeadFirst-HTMLCSS学习笔记][第八章扩大你的词汇量]
字体 font-family,可指定多个候选 body{ font-family:Verdana,Geneva,Arial,sans-serif; } font-size 字体大小 body{ fon ...
- JavaScript自我学习之解析与执行
如果想要学好JavaScript那么我们首先必须要知道浏览器JavaScript引擎是如何解释执行JavaScript代码的,作为一名菜鸟,从自己学习JavaScript的过程来说,真心觉得不了解这些 ...
- java final 和instanceof 关键字
/* final class A { public final void eat(){ System.out.println("测试"); } } */ class A { } c ...
- java序列化ClassNotFoundException
简单的想从保存的对象中重新解析出对象,用了逆序列化,可是报错: java.lang.ClassNotFoundException: xxxxxxxxxxxx at java.net.URLClassL ...
- 原创+部分引用啦:C# Winform界面中的分隔线问题
C sharp 中Winform中的控件很多,一个小小的问题居然会绕上一个小弯子,做界面的时候, 你需要在界面上弄一条分隔线,把相关的功能分隔开来,结果原来在其它 IDE编辑器里很容易实现的这个功能, ...
- TCP的流量控制(转载)
1.TCP的滑动窗口 为了提高信道的利用率TCP协议不使用停止等待协议,而是使用连续ARQ协议,意思就是可以连续发出若干个分组然后等待确认,而不是发送一个分组就停止并等待该分组的确认. TCP的两端都 ...
- busybox中tftp服务器使用命令
参数说明:-l 是local的缩写,后跟存在于Client的源文件名,或下载Client后重命名的文件名.-r 是remote的缩写,后跟Server即PC机tftp服务器根目录中的源文件名,或上传S ...