整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在有很多文檔采用的是PDF文件格式，我們可以通過“云展網”之類的在線服務，將這些PDF轉換成帶3D翻頁效果的電子書，不但閱讀方便，效果酷炫，而且還能很方便地分享給自己的好友。
簡單上傳，PDF變身在線電子書
首先準備好需要轉換的PDF文件，登錄https://book.yunzhan365.com/后按提示先注冊為用戶，登錄后選擇“創建HTML5文檔”，接著點擊“上傳我的文檔”，然后按提示將需要轉換的PDF文件上傳到網站進行轉換處理，在這里還可以為在線電子書設置背景色、音樂等信息（圖1）。
圖1 轉換文件
小提示：如果要將常見的DOC、PPT等文檔轉化為在線書籍，那么可以利用Word 2016、PPT 2016等，打開文檔后點擊“文件→導出→創建PDF/XPS”，將文件轉化為PDF后再進行上傳即可。
文件轉換完畢后會在“我的圖書”看到已經轉換的書籍，按提示點擊即可開始閱讀，轉換后的書籍和在線電子書非常類似，在電腦上我們直接使用鼠標進行翻頁閱讀即可（圖2）。
圖2 閱讀轉換后的書籍
當然這個在線書籍同樣可以轉發給微信、QQ好友，點擊上述頁面的分享按鈕，然后將類似http://www.yunzhan365.com/read/gnsc/biec/mobile/index.html這樣的網址復制。這樣我們需要和微信好友共享超過25MB的PDF文檔時。只要先通過上述的方法轉化為在線文檔，然后將分享的網址發動給好友。好友在微信中直接打開其中的鏈接，在微信中就可以直接進行閱讀，省去直接傳送PDF和微信25MB文件大小的限制，因為這里分享的只是一個網址（圖3）。
圖3 微信里閱讀在線書籍
當然如果是企業宣傳使用，如直接把產品的說明文檔制作成翻頁電子書。那么可以將文檔上傳轉化，接著點擊“分享鏈接”，在彈出的窗口將“插入到網站”代碼復制。在公司主頁頁面，將這段代碼插入到首頁文件中，這樣用戶在訪問官網時，就可以通過點擊鏈接直接打開宣傳點在文檔了（圖4）。
圖4 插入網頁代碼
在CSS3中新增了很多的新特性，其中使用頻率比較高的應該是動畫效果了，它可以幫助我們實現以前使用Javascript才能實現的效果，極大的提高網頁的性能。今天這篇文章我們就來一起看一個使用CSS3新特性完成的翻書效果吧。
本文的源碼已經放在了Github上，感興趣的可以clone到本地試試，地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html
CSS3
首先我們來看看實際的運行效果，動態圖如下所示。
效果圖
在看到上述的效果圖后，我們來進行分析，這個過程是如何實現的。
這個頁面我們通過一個ul包含三個li來實現，每個li都給一個固定的寬度和高度。
第一個li在頁面上靜止不動。
第二個li添加動畫效果，使其直接繞Y軸翻轉360度。
第三個li添加動畫效果，但是翻轉周期是在25%的時候開始，因此會有一種翻書的速度差異感。
上面的步驟分析完后就剩下最重要的一個過程，那就是給外層的ul元素添加perspective屬性，這個屬性是決定這個動畫能不能實現的主要的因素。
perspective是CSS3中新增的屬性，表示的是設置某個元素被查看的視角，用于實現3D效果。
需要注意的是當某個元素設置了perspective屬性時，其子元素會獲得透視效果，而不是這個元素本身。
我們來看一個簡單的例子，有一個section父元素和一個div子元素，讓div元素旋轉45度，html元素如下。
html元素
其對應的CSS屬性如下。
CSS屬性
在section元素上，如果不使用perspective的情況下，得到效果如下圖所示。
效果圖1
如果給section元素加上perspective屬性，并設定600px時，得到的效果圖如下。
效果圖
通過以上兩幅圖的對比我們發現，兩幅圖在Y軸的視角上發生了變化。
接下來，我們來具體看看這個翻書效果的代碼實現。
通過之前的分析，我們知道這個效果是通過ul與li來實現的，html部分代碼如下。
HTML代碼
首先看看ul與li的基本css屬性，記住這里需要給ul元素添加perspective屬性。
基本CSS屬性
然后是給第二個li添加動畫。
第二個li的css屬性
最后是給第三個li添加動畫。
第三個li的css屬性
注意到上面的代碼中有個25%和100%的設置，這個和第二個li不同，所以會有一種翻轉書頁快慢的差異感。
如果按照上述代碼來做，即可實現文章開始的翻書動畫效果。
今天這篇文章主要是通過CSS3新增的屬性實現了一個翻書動畫效果，大家學會了嗎？
官網： 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><!--把紙張變成硬紙板，翻頁的時候效果如翻紙板-->
<div id="flipbook">
<div class="hard">第1頁</div>
<div>第2頁</div>
<div>第3頁</div>
</div><!--自定義書內紙張大小，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>//設置頁面樣式
<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('方法');//增加一頁
//兩個參數 1,jquery對象（頁面） 2,頁號（非必填,默認是往最后一頁后面加一頁）
$('.flipbook').turn('addPage', $('<div/>'), 3);//一個參數 single/double 單頁/雙頁 顯示
$('.flipbook').turn('display', 'double');
//獲取display屬性值
$('.flipbook').turn('display'); //返回single or double//移除指定頁
//一個參數 頁號
$('.flipbook').turn('removePage' , 2); //移除第二頁//指定頁是否存在
//一個參數 頁號
$('.flipbook').turn('hasPage' , 1); //如果該頁存在，返回true//翻到下一頁
$('.flipbook').turn('next');//翻到上一頁
$('.flipbook').turn('previous');//是否存在turn()實例
$('.flipbook').turn('is'); //存在返回true//翻到指定頁
$('.flipbook').turn('page' , 2); //翻到第二頁
//返回當前顯示第幾頁
$('.flipbook').turn('page');//設置總頁數
$('.flipbook').turn('pages' , 2);
//返回總頁數
$('.flipbook').turn('pages');//展示從哪個角翻頁
//一個參數 tl-左上角 bl-左下角 tr-右上角 br-右下角 l-左 r-右
$('.flipbook').turn('peel' , 'br');
//不顯示
$('.flipbook').turn('peel' , false);
// r和l在設置class=hard時才有效果//設置大小
//兩個參數 1,width 2,height
$('.flipbook').turn('size', 922 ,600);
//返回紙的大小{width: xx, height:xx}
$('.flipbook').turn('size'); //停止動畫效果
$('.flipbook').turn('page', 3).turn('stop'); //沒有翻頁動畫//縮放
//兩個參數 1,縮放倍數 2, 縮放動畫持續事件（感覺沒起作用啊）
$('.flipbook').turn('zoom', 0.6, 500);
//返回縮放倍數，默認1
$('.flipbook').turn('zoom'); 兩種方式添加事件
1. turn()構造方法里面的 when: {}
2. bind()
//頁面上的任何一個動作開始觸發
when: {
start: function (event, page, pageObj) {
console.log('start');
}
$('.flipbook').bind('start', function (event, page, pageObj) {
console.log('start');
});//頁面上的任何一個動作結束觸發
when: {
end: function (event, page, pageObj) {
console.log('end');
}
$('.flipbook').bind('end', function (event, page, pageObj) {
console.log('end');
});//當在第一頁時觸發
when: {
first: function (event) {
console.log('first page');
}
$('.flipbook').bind('first', function (event) {
console.log('first page');
});//當在最后一頁時觸發
when: {
last: function (event) {
console.log('last page');
}
$('.flipbook').bind('last', function (event) {
console.log('last page');
});//翻頁前觸發
//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);
});//翻頁后觸發
//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');
});*請認真填寫需求信息，我們會在24小時內與您取得聯系。
