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规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...
随机推荐
- 关于C#基类和子类函数调用问题
c#基类子类的函数调用关系,代码说明newkeyword后面的类中的函数为对象调用的函数,当然必需要有virtual和override,继承就相当于包括了基类的函数,子类对象调用时基类的函数相当于就在 ...
- 初次使用SVN心得
进入实验室, 一个项目往往需要多天多人次共同维护,所以版本控制也显得尤为关键.下面是我第一次使用SVN工具的心得体会. 首先是安装,服务器搭配方面应该是之前完成的,这里就不多讲了. 下载地址:http ...
- 飘逸的python - 解决一个有限制的组合需求
假设有一个团队技能的需求. 这类技能是要集齐所有指定的人就能激活. 但是因为同一个人又2种身份存在,比如杨戬/神杨戬,于是便产生了组合. 这种组合跟普通组合不一样,普通组合可以随意组合.而这种组合是每 ...
- 设计模式12---设计模式之代理模式(Proxy)(结构型)
1.场景模拟 考虑这样一个实际应用: HR提出,当选择一个部门或者是分公司的时候,要把所有的分公司下的员工显示出来,而且不要翻页,方便进行业务处理,只需要显示姓名即可,但是点击姓名会出现这位员工的详细 ...
- Android学习笔记--广播(Broadcast)
1.Android广播分类 android的广播类型分为两类:标准广播和有序广播. 标准广播:异步广播,广播发出后,所有注册了的广播接收器都会同时接收到该广播.打个比方:做地铁过程中的语音播报,当列车 ...
- vs2012 boost配置
1.去www.boost.org下载最新的boost,我下载了boost_1_60_02.(我放在D:/cpp目录下)解压到当前文件夹3.打开VS2012->VS TOOLS->VS命令提 ...
- 【转载】iOS 设置Launch Image 启动图片(适用iOS9)
Step1 1.点击Image.xcassets 进入图片管理,然后右击,弹出"New Launch Image" 2.如图,右侧的勾选可以让你选择是否要对ipad,横屏,竖屏,以 ...
- JS闭包(一)
闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包的常见方法:在一个函数内部创建另一个函数. 对彻底理解闭包,需要知道如何创建作用域链以及作用域链有什么作用的细节. 闭包的功能: 保存函数执行 ...
- (原创) mac 10.9.2 eclipse 的 CDT 的 异常的修复
测试平台:macbook air 2012 , os x 10.9.2 , eclipse 4.3 在升级了 10.9 之后,eclipse 的CDT 无法正常使用了 异常表现: 1. 文 ...
- 基于cygwin构建u-boot(一)环境搭建
从本文开始,更系统的描述基于cygwin构建u-boot. 之前<痛苦的版本对齐>系列,对于cygwin环境下Sourcery CodeBench,u-boot-1.1.6的构建有侧面的说 ...