当前位置：首页 > 网页特效 > 动画效果

支持移动触摸的网页版PDF格式文件阅读器插件

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

TouchPDF插件依赖于PDF.js，一款由Mozilla出品的pdf阅读器插件。

另外还是用了PanZoom颜色缩放jQuery插件，以及用于支持移动触摸的TouchSwipe插件。

使用TouchPDF插件需要引入以下一些依赖文件。

```html
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="pdf.compatibility.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.js"></script>
<script type="text/javascript" src="jquery.panzoom.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.touchPDF.js"></script>
<link href="jquery.touchPDF.css" rel="stylesheet" media="screen" />            
```    
##### HTML结构
添加一个空的div元素作为PDF阅读器的容器。

```html
<div id="myPDF"></div>   
```           
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该PDF阅读器插件。

```html
<script type="text/javascript">
  $(function() {
    $("#myPDF").pdf( { source: "yourfile.pdf" } );
  });
</script>   
```           
你也可以为PDF页面添加一些彩色的Tabs书签。

```html
$(function() {      
  $("#myPDF").pdf( {
    source: "demo.pdf",
    tabs: [
      {title: "Tab 1", page: 2, color: "orange"},
      {title: "Tab 2", page: 3, color: "green"},
      {title: "Tab 3", page: 5, color: "blue"},
    ]
 });
});         
```     
#####  配置参数 
该PDF阅读器的可用配置参数有：

|  参数 |  类型 |  默认值 | 描述  |
| ------------ | ------------ | ------------ | ------------ |
|source|string|""|要显示的PDF文件的路径|
|title|string|"TouchPDF"|在工具栏中显示的PDF文件的名字|
|tabs|array|[]|侧边栏显示的tabs|
|tabsColor|string|"beige|所有tabs默认的背景颜色。可用的颜色有：green", "yellow", "orange", "brown", "blue", "white", "black" 或者你可以通过CSS来定义自己的颜色|
|disableZoom|boolean|false|是否禁止PDF文档缩放。默认情况下PDF文档可以通过鼠标滚动，两个手指滑动，键盘+/-键和工具栏按钮来进行缩放|
|disableSwipe|boolean|false|是否禁止PDF文档的滑动触摸。默认情况下PDF文档可以通过手指滑动来翻页|
|disableLinks|boolean|false|是否禁止PDF文档中的所有内部和外部超链接|
|disableKeys|boolean|false|是否禁止使用键盘箭头键来翻页和禁止使用键盘+/-键来缩放|
|redrawOnWindowResize|boolean|true|强制在窗口大小改变时更改PDF阅读器的大小|
|pdfScale|float|1|定义PDF页面大小和TABS大小之间的比例|
|quality|float|2|设置PDF文件加载时的比例|
|showToolbar|boolean|true|是否显示工具栏|
|loaded|function|null|当PDF文件加载完毕之后触发的回调函数|
|changed|function|null|当一个新的页面被显示时触发的回调函数|
|loadingHTML|string|"Loading PDF"|在PDF文档被加载完成之前显示在空白页面上的文本或HTML|
|loadingHeight|int|841|在PDF文档被加载完成之前显示的空白页面的高度，默认为A4纸的高度|
|loadingWidth|int|595|在PDF文档被加载完成之前显示的空白页面的宽度，默认为A4纸的宽度|
每一个Tab都必须使用Json对象格式来定义，可用的TAB属性如下：

|  属性 |  类型 |   默认值|  描述 |
| ------------ | ------------ | ------------ | ------------ |
|title|string|Mandatory|显示在Tab上的文字，小于3个字符将水平显示，大于3个字符将垂直显示|
|page|int|Mandatory|链接到PDF文档中的页码，页码从1开始|
|color|string|于PDF阅读器中定义相同|设置Tabs的颜色|
|offset|int|0|Pill up tabs with a small offset so that the user knows there are hidden tabs behind. Starts at 0.|
|top|int|undefined|基于PDF文档的顶部对齐tab，该参数可以设置一个像素值，使tab往下偏移|
|bottom|int|undefined|基于PDF文档的底部对齐tab，该参数可以设置一个像素值，使tab往上偏移|
|height|int|undefined|指定tab的高度，默认情况下，tab的高度依赖以字符的多少|

web299.com

支持移动触摸的网页版PDF格式文件阅读器插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果