turnjs4-HTML5 制作电子翻书

urnjs4下载

官网： http://www.turnjs.com/
首页download下来里面包括所需要的js，一些例子和api

页面功能说明

在html中用一个<div/>作为容器管理所有的页面，往div内添加页面有三种方式：

直接在flipbook里面添加元素

<div id="flipbook">
   <div>第1页</div>
   <div>第2页</div>
   <div>第3页</div>
</div>

用api里提供的方法添加

<div id="flipbook">
   <!-- 在这里添加页 -->
</div>

第一种和第二种方式结合

<div id="flipbook">
   <div>第1页</div>
   <!-- 在这里添加页 -->
   <div>最后1页</div>
</div>

样式功能说明

hard属性

<!--把纸张变成硬纸板，翻页的时候效果如翻纸板-->
<div id="flipbook">
    <div class="hard">第1页</div>
    <div>第2页</div>
    <div>第3页</div>
</div>

own-size属性-纸张大小

<!--自定义书内纸张大小，style-->
<div id="flipbook">
   <div class="own-size" style="width: 200px; height: 200px;">第1页</div>
   <div class="own-size" style="width: 200px; height: 200px;">第2页</div>
   <div>第3页</div>
</div>

p[0-9]+ 样式增加

//设置页面样式 
<div id="flipbook">
    <div>第1页</div>  //在css中写.p1{}, 第一页会自己加上.p1
    <div>第2页</div>
    <div>第3页</div>
</div>

构造方法

$('#flipbook').turn([options]);

配置项说明

$('.flipbook').turn({
    width: 922,         //宽度
    height: 600,        //高度
    acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为true
    autoCenter: false,  //自动居中, 默认false
    display: 'double',  //单页显示/双页显示  single/double
    duration: 1000,     //翻页速度(毫秒), 默认600ms
    gradients: true,    //翻页时的阴影渐变, 默认true
    inclination: 0,
    page: 1,            //设置当前显示第几页
    //pages: 4,         //总页数
    when: {}            //监听事件
});

使用方法说明

语法

$('.flipbook').turn('方法名'[, 参数],);   
//不需要turn()返回值的时候，可以连这写
$('.flipbook').turn('方法名'[, 参数],).turn('方法');

addPage增加页面

//增加一页
//两个参数 1,jquery对象（页面） 2,页号（非必填,默认是往最后一页后面加一页）
$('.flipbook').turn('addPage', $('<div/>'), 3);

dispaly单双页设置

//一个参数 single/double 单页/双页 显示
$('.flipbook').turn('display', 'double');

//获取display属性值
$('.flipbook').turn('display');  //返回single or double

removePage删除页面

//移除指定页
//一个参数 页号
$('.flipbook').turn('removePage' , 2); //移除第二页

hasPage页面是否存在

//指定页是否存在
//一个参数 页号
$('.flipbook').turn('hasPage' , 1); //如果该页存在，返回true

next翻到下一页

//翻到下一页
$('.flipbook').turn('next');

previous翻到上一页

//翻到上一页
$('.flipbook').turn('previous');

is是否存在

//是否存在turn()实例
$('.flipbook').turn('is'); //存在返回true

page跳转指定页

//翻到指定页
$('.flipbook').turn('page' , 2); //翻到第二页

//返回当前显示第几页
$('.flipbook').turn('page');

pages设置总页数

//设置总页数
$('.flipbook').turn('pages' , 2);

//返回总页数
$('.flipbook').turn('pages');

peel那个角度翻页

//展示从哪个角翻页
//一个参数   tl-左上角 bl-左下角 tr-右上角 br-右下角 l-左 r-右
$('.flipbook').turn('peel' , 'br');

//不显示
$('.flipbook').turn('peel' , false);

// r和l在设置class=hard时才有效果

size设置大小

//设置大小
//两个参数 1,width 2,height
$('.flipbook').turn('size', 922 ,600);

//返回纸的大小{width: xx, height:xx}
$('.flipbook').turn('size');

stop停止翻页效果

//停止动画效果
$('.flipbook').turn('page', 3).turn('stop'); //没有翻页动画

zoom缩放

//缩放
//两个参数 1,缩放倍数 2, 缩放动画持续事件（感觉没起作用啊）
$('.flipbook').turn('zoom', 0.6, 500);

//返回缩放倍数，默认1
$('.flipbook').turn('zoom');

事件使用说明

两种方式添加事件

1. turn()构造方法里面的 when: {}
2. bind()

start动作开始触发

//页面上的任何一个动作开始触发
when: {
    start: function (event, page, pageObj) {
        console.log('start');
    }

$('.flipbook').bind('start', function (event, page, pageObj) {
    console.log('start');
});

end动作结束触发

//页面上的任何一个动作结束触发
when: {
    end: function (event, page, pageObj) {
        console.log('end');
    }

$('.flipbook').bind('end', function (event, page, pageObj) {
    console.log('end');
});

first第一页触发

//当在第一页时触发
when: {
    first: function (event) {
        console.log('first page');
    }

$('.flipbook').bind('first', function (event) {
    console.log('first page');
});

last最后一页触发

//当在最后一页时触发
when: {
    last: function (event) {
        console.log('last page');
    }

$('.flipbook').bind('last', function (event) {
    console.log('last page');
});

turning翻页前触发

//翻页前触发
//event
//page $('.flipbook').turn('page') 
//view $('.flipbook').turn('view'); 
when: {
    turning: function (event, page, view) {
        console.log('turning', page, view); //page 和 view 显示的是当前展示的页号
    }

$('.flipbook').bind('turning', function (event, page, view) {
    console.log('turning', page, view);
});

turned翻页后触发

//翻页后触发
//event
//page $('.flipbook').turn('page')
//view $('.flipbook').turn('view'); 
when: {
    turned: function (event, page, view) {
        console.log('turned');
    }

$('.flipbook').bind('turned', function (event, page, view) {
    console.log('turned');
});

zooming缩放触发

子画册是一种创新的方式，可以将传统的纸质画册转化为数字化的形式，并且具备翻页的功能。它不仅可以提供更好的阅读体验，还可以方便地分享给他人。

1.选择制作工具：

有许多在线平台和软件可以帮助你制作电子画册，比如FLBOOK，FLBOOK很适合初学者制作电子画册，也可以自由创作

2.开始创作：

FLBOOK有四种创建作品的模式，用户可以根据个人需求选择一向合适自己的创建作品的方式

3. 添加互动元素：无论你选择的是那种创建作品模式，FLBOOK都会自动跳转到编辑页面，用户可以使用FLBOOK添加各种互动元素，比如翻页效果、音频、视频等

4.导出和分享：完成电子画册的制作后，导出为可用的格式，比如PDF或HTML5等多种格式文件。然后，你可以选择将其上传到网站、社交媒体或通过邮件分享给他人。

宝子们，有不懂的可以在评论区踢我哦！

lip PDF Professional是是一款功能强大的且专业PDF翻页电子书制作工具，它可以将静态PDF杂志/小册子/目录转换为交互式，媒体丰富的电子书。可以在Web，社交和移动设备上查看，共享和分发的内容。软件自带丰富的模板，也支持自定义设置，用户可以根据自己的需求制作自己想要的电子书模式。支持制作适应不同设备的电子书，如安卓手机、苹果手机、平板等。您可以通过它快速起步，只需在拖放界面中嵌入YouTube/Vimeo和本地视频、音频、超链接、图片等多媒体元素到PDF页面中，就可以制作令人过目不忘的交互式电子册，电子杂志，电子目录等，给您的读者或客户提供无与伦比的真实阅读体验。
这次给大家提供的是Flip PDF Professional绿色中文版，软件支持繁体中文，下文有切换语言教程。该版本基于官方原本制作，绿色免安装，无需激活、注册等步骤，打开后即可使用软件全部功能，非常的简单方便，有需要的用户可不要错过了。
下载地址：http://www.32r.com/soft/84299.html

软件特色

1、交互式发布-添加视频，图像，链接等
您可以轻松地将所有类型的动画富媒体嵌入到翻书中。只需拖动或单击，您就可以将YouTube视频，超链接，动画文本，图像库，音频文件和Flash嵌入到书页中，并创建逼真的感觉。您可以添加热点来突出显示重要内容并引导网站或电子商务商店的访问量！
2、触控支持-流畅的移动体验
与喜欢随身携带iPad，iPhone或Android平板电脑并且对滑动，触摸和点击感到满意的客户进行互动。翻书基于Flash和HTML5输出格式，可以在台式机和移动设备上流畅运行。借助Flip PDF Pro，您的读者可以随时随地查看您的数字翻页杂志，lookbook，目录和报纸。
3、品牌推广-促进您的业务
Flip PDF Pro使您可以灵活地使用品牌徽标或网站图标自定义翻书工具栏，从而帮助您通过客户建立品牌知名度。此外，您还可以在小册子页面中添加公司图片库，品牌按钮和与超链接集成的热点，从而使您的内容具有交互性并将访问量引至您的网站或在线商店。
4、在线发布，或用于Mac，移动设备，CD，电子邮件
Flip PDF Pro提供了多种共享页面翻转电子书的方式。您可以在线发布HTML格式的电子书，而不受网站域限制或支付版权费。您还可以通过电子邮件，ZIP / EXE格式的CD / DVD或Flash驱动程序，Mac App，FBR（可以使用免费的Flip Reader轻松脱机阅读）或在移动设备（iPhone，iPad，iPod Touch和甚至Android设备）。此外，您可以将活页簿直接发布到FTP服务器，通过电子邮件发送给读者或创建* .scr格式的活页簿以用作屏幕保护程序。此外，您可以将活页簿直接发布为WordPress插件，Joomla和Drupal模块。
5、丰富的预先设计的模板
在Flip PDF Pro中，您不仅可以为书籍选择Flash预加载器，还可以使用不同的模板来呈现具有不同布局和工具栏功能的活页簿。您可以使用数十种模板设置来自定义时尚的电子书。多个预先设计的模板，主题，场景和背景可以直接使用。您还可以在书中添加插件：横幅，新闻旋转器，图像滑块，音乐播放器，YouTube视频横幅等。现在还有许多在线资源可供使用：多个模板，400多个主题， 200多个场景和700多个背景。将来会发布更多令人惊叹的模板和其他资源。
6、命令行模式用于静默转换
除了单转换和批处理转换模式外，Flip PDF Pro还提供了命令行模式，以帮助您自动创建Flash电子书，而无需打开Windows桌面应用程序。命令行模式允许您自定义设置多个详细信息。此命令行模式可以轻松执行转换！
7、Google Analytics（分析）整合
如果您拥有Google Analytics（分析）帐户，则可以使用Flip PDF Pro的内置功能-Google Analytics（分析）嵌入。将Google Analytics（分析）跟踪代码嵌入到每本在线图书中，这将使出版商能够跟踪每页和每个互动事件的效果。衡量出版物的关键指标包括访问量，页面浏览量，持续时间，跳出率和事件，然后为读者创建合适的内容。
8、支持社交网络
Flip PDF Pro创建的翻页电子书与现代社交网络的集成可以帮助使越来越多的人知道它们，这些人将在线共享您的书。所有读者都可以在Facebook和Twitter上与他人共享书籍链接，或者通过电子邮件发送链接，甚至将您的翻书出版物嵌入自己的网站。
9、多语言界面支持
Flip PDF Pro是世界上功能最强大且最受欢迎的翻书软件之一。我们已经开发了11种语言的德国，法语，西班牙语，葡萄牙语等版本的软件，以满足全球用户的需求。每个用户都可以自定义软件语言并在本地语言界面中操作翻书项目。

Flip PDF Professional中文版切换中文教程

1、在本站下载解压文件后，双击打开软件。
2、在软件主界面右上角找到Options（选项）

3、在弹出的菜单栏中找到Language（语言）并选择chinese（中文）
4、点击确定，更改后的语言将在软件重启后生效。

功能介绍

1、PDF/图片转换成翻页电子杂志：基本任何格式的设计稿或文档都能输出为PDF或图片格式，直接导入名编辑，即可转换为精美的3D翻书式电子杂志。另外，名编辑对PDF的识别、分割、切割能力非常强，无需借助其他软件。
2、批量转换多个PDF文件：您可以同时批量转换多个PDF文件。导入PDF文件，设置需要导入的页面范围和选择模板、主题，然后能一口气生成多个电子书或者合并为一本电子杂志了。
3、添加多媒体文件：您可以在电子杂志里添加形状、文本、链接、图片、视频、flash或声音文件。
4、设置背景音乐：在名编辑中，您可以设置背景音乐，并且可以选择循环播放或单曲播放等多种播放模式。
5、添加图片播放器：当您有很多图片需要在某个页面展示时，您可以在翻页电子杂志的页面添加图片幻灯片播放器，展示您需要展示的图片。
6、自定义背景图片、颜色背景和flash动态背景：您可以设置任何您喜欢的背景图片，设置纯色背景或者渐变色背景。如果您觉得图片背景不够绚丽，您还可以用flash动态背景。名编辑电子杂志大师提供了许多免费的场景，同时也可以导入您自己的flash文件作为背景。
7、输出HTML/EXE/Zip/Mac App/手机版本：HTML用于上传网络；*.EXE和*。Zip可直接发给客户在自己电脑上阅读；*.App用于在苹果电脑本地离线阅读；手机版输出的HTML5格式可在手机在线阅读、离线阅读(离线阅读目前仅支持iPhone/iPad)。另外也可录制到CD。
8、上传到网上在线阅读，支持手机/平板/电脑：当您用我们的电子杂志制作软件制作了HTML格式的电子杂志后，您可以通过FTP上传到服务器空间，同时支持手机、平板和电脑在线阅读。

Flip PDF Professional绿色中文版使用教程

步骤1：创建一个新项目

启动Flip PDF Professional程序，单击“新建”按钮，然后单击“浏览..”以从计算机中选择PDF文档。您也可以导入图像以在Flip PDF Pro中创建相册。
步骤2：自定义您自己的翻书

在“模板设计”界面中，您可以使用内置的模板，主题，背景，动画场景，助手，插件来设计活动簿。此外，在“设计设置”选项卡中，您可以使用徽标，界面语言，社交共享等各种自定义设置来自定义活动簿。
步骤3：通过视频，音频，图像和链接丰富活动簿

Flip PDF Pro中功能强大的“页面编辑器”使发布者可以在活页簿中添加视频（包括YouTube和Vimeo视频），音频，Flash，图像，链接，文本，形状，按钮，可打印区域等，从而使您可以翻页电子书更华丽，更有吸引力。
步骤4：以不同格式发布活动簿

Flip PDF Pro为您提供多种输出格式，包括html，exe，zip，Mac app，移动版本和刻录到CD。您可以将活动簿发布到在线主机上，也可以与在线读者共享。

在线咨询

上一篇：如何在JavaScript中逆向输出一个字符串
下一篇：2024头条高考季##q1#「天气预报」大雨如约而至

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商