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 });

随机推荐

jquery中focus()失效怎么解决
又学到一个新的知识! 今天在写表单验证的时候遇到一个关于获取焦点的focus()问题. 场景说明:在验证密码输入格式不对之后,弹出alert()提示框,提示密码不对,请重新输入.同时清空密码框并获得焦 ...
MySQL外键与外键关系说明(简单易懂)
MySQL主键和外键使用及说明一.外键约束 MySQL通过外键约束来保证表与表之间的数据的完整性和准确性. 外键的使用条件: 1.两个表必须是InnoDB表,MyISAM表暂时不支持外键(据说以后 ...
【leetcode】Best Time to Buy and Sell 3 （hard) 自己做出来了但别人的更好
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
Android屏幕适应详解（二）
android应用自适应多分辨率的解决方法 1. 首先是建立多个layout文件夹(drawable也一样). 在res目录下建立多个layout文件夹,文件夹名称为layout-800x480等. ...
简单Linq笔记
Linq是.net 3.5才引入的要引入命名空间System.Linq. Linq to XML要引入System.Xml.Linq Linq to ADO.NET要引入System.Data.L ...
My&period;Ioc 代码示例——属性和方法注入
在 My.Ioc 中,我们可以指定让容器在构建好对象实例之后,自动为我们调用对象的公共方法或是为对象的公共属性赋值.在解析对象实例时,容器将根据我们在注册对象时指定的方法调用或属性赋值的先后顺序,调用 ...
常用DOM整理
常用DOM整理前言: html为document搭建了一棵DOM树,这棵树就是有一系列Node节点所构成的.他为我们定义了文档的结构. Node类型: Node.ELEMENT_NODE(1); ...
LINUX之根目录介绍、普通目录创建、删除、复制、移动、权限管理命令记录
(一)Linux 系统目录结构登录系统后,在当前命令窗口下输入命令:ls / /bin:bin是Binary的缩写, 这个目录存放着最经常使用的命令. /boot:这里存放的是启动Linux时使用的 ...
深入理解读写锁ReentrantReadWriteLock
1.读写锁的介绍在并发场景中用于解决线程安全的问题,我们几乎会提供高频率的使用到独占式锁,通常使用java提供的关键字synchronized(关于synchronized可以看这篇文章)或者con ...
java 日历类Calendar用法
如何获取昨天?取昨天的日期,本想的截出来日期减一就好了.又一想不对,如果今天是一号怎么办? 现有两个办法 1: Date as = new Date(new Date().getTime()-24*6 ...

Demo参考

特此说明

插件说明

插件特性

目录结构说明

如何使用

MPreview.js (Word 版) 参数说明

MPreviewPPT.js (PPT 版) 参数说明

随机推荐

相关文章