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规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...
随机推荐
- 【软件技巧】Sublime Text为不同语法定义不同高亮
Sublime Text默认的语法高亮已经非常美丽了,可是对于个别语言还是有些不爽. 默认高亮规则叫Monokai,能够从Preferences->Settings - Default中看到: ...
- sql注入数据库修复方法
1.第一种情况是 需要将指定的 注入字符串全部替换掉(仅替换注入的字符串为空) declare @delStr nvarchar(500) set @delStr='<script src=ht ...
- [Hapi.js] Logging with good and good-console
hapi doesn't ship with logging support baked in. Luckily, hapi's rich plugin ecosystem includes ever ...
- [转]IDENT_CURRENT、SCOPE_IDENTITY、@@IDENTITY 差異對照表
本文转自:http://www.dotblogs.com.tw/hunterpo/archive/2009/09/04/10421.aspx IDENT_CURRENT.SCOPE_IDENTITY ...
- ARM9嵌入式学习笔记(1)-Linux命令
ARM9嵌入式学习笔记(1)-Linux命令 实验1-1-2 Linux常见命令使用 添加用户useradd smb; 设置账户密码passwd smb; 切换用户su - root 关机命令shut ...
- [Python学习笔记][第五章Python函数设计与使用]
2016/1/29学习内容 第四章 Python函数设计与使用 之前的几页忘记保存了 很伤心 变量作用域 -一个变量已在函数外定义,如果在函数内需要修改这个变量的值,并将这个赋值结果反映到函数之外,可 ...
- js 随手记
var name = 'frog' function hello(){ alert(name); // undefined var name = 'bbc'; } 在javascript中,函数是可以 ...
- 安装完Oracle数据库,给scott账户解锁方法
装完了Oracle 10g数据库,忘了给scott账户解锁.这时可以在sql plus工具里(开始|所有程序|<Oracle-Home>|应用程序开发|SQL Plus),也可以在控制台通 ...
- sketchup 导出 fbx文件 单位 错误
最近在使用sketchup导出fbx文件到unity中使用时,发生了尺度单位上的错误.按照网上给出的标准教程,选定模型的单位为十进制-米.导出时选项选择'米',但是得到的fbx文件在unity中出现了 ...
- 使用Win32 API 查找文件
头文件:#include <windows.h> //FindFirstFile() 获得指定目录的第一个文件 HANDLE FindFirstFile( LPCTSTR lpFileNa ...