Word,PPT 文档预览组件(图片预览组件)

移动端请移步 MPreview.mobile

Demo参考

http://demo.webjyh.com/MPreview/

特此说明

此插件是我在项目开发中而制作,其只适用于其项目,如须使用须注意,提供的图片须有较大的宽高。

插件说明

  1. 此插件需要由服务端提供转换好的Word图片或PPT图片来进行预览。
  2. 插件需要 jQuery1.9+ 库。支持IE7+,FireFox,Chrome。
  3. 初始化调用插件的外容器,只需设置宽高样式即可,无需其它设置。
  4. 因插件是刚开始阶段,一些功能并未能完善全,如:放大,缩小功能。
  5. 插件中一些滚动的计算是硬算出来的(勿喷)。

插件特性

  1. 服务端将全数据返回(图像地址的数组集合),由插件进行分割加载。
  2. 支持滚动条拖拽滚动及全屏预览。
  3. 支持上一页,下一页功能。

目录结构说明

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的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  7. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  8. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

  9. 干货分享:让你分分钟学会 JS 闭包

    闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

随机推荐

  1. ping不通的几种可能原因

    平时使用中常常会碰到ping不通的情况,ping不通的原因有非常多,比方路由设置问题,比方网络问题,下面列出几点原因:      1.太心急.即网线刚插到交换机上就想Ping通网关,忽略了生成树的收敛 ...

  2. [IDEA学习笔记][keymap]

    一个总站: http://www.youmeek.com/ 常用的快捷键keymap 提示: ctrl+N:快速打开一个类 Ctrl+P 方法参数提示显示 Ctrl+J 提示自定义模板 Ctrl+O ...

  3. PHP学习笔记二十五【类的继承】

    <?php //定义父类 class Stu{ public $name; protected $age; protected $grade; private $address;//私有变量不会 ...

  4. Ubuntu系统下搭建Python开发环境

    之前演示了在Windows中安装Pycharm,很简单.下面介绍一下如何在Ubuntu中安装Pycharm 1.更新Python至3.5.1,执行以下命令: sudo add-apt-reposito ...

  5. uva 508 Morse Mismatches

    Samuel F. B. Morse is best known for the coding scheme that carries his name. Morse code is still us ...

  6. codeforces432D Prefixes and Suffixes(kmp+dp)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud D. Prefixes and Suffixes You have a strin ...

  7. CDZSC_2015寒假新人(2)——数学 G

    G - G Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  8. (原+转)使用opencv的DFT计算卷积

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5462665.html 参考网址: http://blog.csdn.net/lichengyu/art ...

  9. shell中的环境变量

    局部(local)环境变量 定义局部环境变量的方式如下: variableName=value 需要注意的是variableName前面没有$符号,并且=两边没有空格. 局部环境变量只能在当前shel ...

  10. 解决ScrollView中嵌套ListView滚动效果冲突问题

    在ScrollView中嵌套使用ListView,ListView只会显示一行到两行的数据.起初我以为是样式的问题,一直在对XML文件的样 式进行尝试性设置,但始终得不到想要的效果.后来在网上查了查, ...