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小時內與您取得聯系。

整合營銷服務商