turn.js是一個能夠實現3d書籍展現效果的jq插件,使用html5和css3來執行效果。能夠很好的適應於ios和安卓等觸摸設備。css
下面是官網展現的最簡單的一個應用實例html
<div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> <div> Page 4 </div> <div class="hard"></div> <div class="hard"></div> </div>
$("#flipbook").turn({ width: 400, height: 300, autoCenter: true });
這個構造函數定義了filpbook和zoom在哪裏建立,所以這個構造函數只能被調用一次而且不能被省略。flipbook和zoom都有單獨的構造函數html5
$("#flipbook").turn([options]);
$("#flipbook").turn({page: 1, acceleration: true, gradients: true});
$("#zoom-viewport").zoom(options);
acceleration:boolean
默認值true使用觸摸時設備時值必須爲truejquery
autoCenter:boolean
默認值false是否居中ios
direction:string
默認值ltr指定翻頁的方向,ltr:從左到右;rtl:從右到左css3
示例web
在options中配置屬性數組
$("#flipbook").turn({direction:"rtl"});
在標籤中直接設置屬性dom
<div id="flipbook" dir="rtl"> <!--Pages--> </div>
在css中設置屬性函數
#flipbook { direction:rtl; }
display:string
默認值double設置書籍的顯示樣式,double顯示雙面,single顯示單面
duration:number
默認值:600設置翻頁動畫的快慢,設置爲0時,不會有翻頁動畫
gradient:boolean
默認值:true設置動畫過渡效果時的陰影效果
height:number
默認值:$("flipbook").height()
設置flipbook的高度
elevation:number
默認值:0設置動畫時的高度(elevation)
page:number
默認值:1設置初始化flipbook時的頁面數
pages:number
默認值:$("#flipbook").children().length
爲書籍添加任意的頁數,默認值爲當前書籍的頁數。若是設置的頁數大於當前fliplook中已存在的頁面數,會使用addPage方法動態的添加這些頁面
turnCorners:string
默認值:bl,br設置翻頁時可以使用的頁角,像使用page,next,previous等方法時
樣式:{left-corner},{right-corner}
可能的值:bl,br
ortl,tr
orbl,tr
示例
//自動翻頁 var way = 1; setInterval(function() { //當前頁面爲第一頁,只能向後翻頁 if (way==1) { $("#flipbook").turn("next"); //當翻到最後一頁時,只能向前翻 if ($("#flipbook").turn("page")== $("#flipbook").turn("pages")) { way = 2; $("#flipbook").turn("options", {turnCorners: "tl,tr"}); } } else { $("#flipbook").turn("previous"); if ($("#flipbook").turn("page")==1) { way = 1; $("#flipbook").turn("options", {turnCorners: "bl,br"}); } } }, 1000);
when:{}
默認值:空對象設置事件監聽
$("#flipbook").turn({when: { turning: function(event, page, pageObject) { // Implementation } } });
width:number
默認值:$("#flipbook").width()
設置頁面寬度
easeFunction:string
默認值:ease-in-out
定義過渡動畫中加速度曲線模式
可選的值有:
- default
- linear
- ease-in
- ease-out
- ease-in-out
- cubic bezier (require points)
duration:number
默認值:600
定義了過渡動畫的快慢,設置爲0時沒有過渡效果
max:number or function
默認值:必須手動設置值
設置縮放因子的最大值,值爲縮放時的最大比例係數
示例
- 參數值爲number
// This will increase three times the size of the flipbook //縮放的時候係數爲3倍 $("#zoom-viewport").zoom({ flipbook: $("#flipbook"), max: 3 });
- 參數值爲function
// If we want to make the flipbook 3000 width when zoomed in. //縮放到指定寬度3000 $("#zoom-viewport").zoom({ flipbook: $("#flipbook"), max: function() { return 3000/$('.magazine').width(); } });
flipbook:jquery element
默認值:必須手動設置
指向zoom做用的內容
示例
$("#flipbook").turn(); $("#zoom-viewport").zoom({ flipbook: $("#flipbook"), max: 3 });
when:object
默認值:{}
設置事件監聽
示例
$("#zoom-viewport").turn({when: { doubleTap: function(event) { // Implementation } } });
$("#flipbook").turn("propertyName");
當前頁面若是有動畫效果(翻頁的時候)返回true
示例
function isAnimating() { if ($("#flipbook").turn("animating")) { alert('Animating a page!'); } }
返回當前書籍的翻頁方向,返回值爲ltr或rtl
示例
$("#flipbook").turn("direction");
返回當前書籍的顯示方式,返回值爲double或single
示例
alert("The current display is: " + $("#flipbook").turn("display"));
是否禁用,禁用返回true
獲取當前的頁面值
示例
alert("The current page is: "+$("#flipbook").turn("page"));
獲取當前書的總頁面數
示例
alert("#flipbook has " + $("#flipbook").turn("pages") + " pages");
獲取當前書的尺寸,返回值爲一個對象,包括兩個內容:width和height
示例
var size = $("#flipbook").turn("size"); alert("Width: "+size.width + ", Height:"+size.height);
獲取初始化書籍時設置的options
示例
var duration = $("#flipbook").turn("options").duration; alert("The duration of the transition is "+duration);
獲取當前的view
示例
var view = $("#flipbook").turn("view").join(" and "); alert("Current view: "+view);
獲取flipbook的縮放係數因子。默認值爲1,表明當使用尺寸相關方法時flipbook會使用與原始尺寸相同的尺寸(不會改變尺寸)
示例
var zoom = $("#flipbook").turn("zoom"); alert("Current zoom: "+zoom);
返回當前的zoom值
示例
function zoomedIn() { //值爲1表明沒有進行縮放 if ($("#zoom-viewport").turn("value")==1) alert("No zoom"); //值大於1表明當前有縮放效果 else if ($("#zoom-viewport").turn("value")>1) alert("Zoomed In"); }
方法用於執行諸如翻頁或者更改屬性狀態等操做
語法
$("#flipbook").turn('method name'[, argument1, argument2]);
當方法沒有返回值時,能夠與另外一個方法鏈接
$("#flipbook").turn("method1").turn("method2");
向flipbook中添加新的頁面
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
element | jquery元素 | 想要添加的dom元素 | $("<div />") |
pageNumber | number | 想要往對應頁面添加的頁碼數 | $("#flipbook").turn("pages")+1 默認添加到最後一頁 |
示例 若是要向第十頁添加新頁面,能夠這樣
element = $("<div />").html("Loading..."); $("#flipbook").turn("addPage", element, 10);
或者 設置新頁面元素的class值爲"p10"也能夠指明要插入的頁面爲第十頁
element = $("<div />", {"class": "p10"}).html("Loading..."); $("#flipbook").turn("addPage", element);
根據可見的頁面數量來決定flipbook的center。這個方法修改
flipbook
的css屬性margin-left
以致於將flipbook放置於中心。所以若是須要修改margin-left
,最好須要將flipbook
放置到一個容器div中來方便修改其margin
屬性
若是flipbook
的option
的autoCenter
設置爲了true
,則不須要使用這個方法
這個方法沒有參數
示例
$("#flipbook").turn("center");
使用這個方法時,實際上是爲
flipbook
設置了以下css
樣式
#flipbook{ transition:margin-left 1s; -webkit-transition:margin-left 1s; -moz-transition:margin-left 1s; -o-transition:margin-left 1s; -ms-transition:margin-left 1s; transition:margin-left 1s; }
消除flipbook。從dom樹,內存和事件監聽器中刪除全部頁面
刪除flipbook的同時也會自動刪除zoom(若是定義了的話) 該方法沒有參數
示例
$("#flipbook").turn("destroy");
也能夠刪除這些頁面的容器
#flipbook
,以下
$("#flipbook").turn("destroy").remove();
設置flipbook的翻頁方向(ltr,rtl)
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
direction | string | ltr or rtl |
必須手動設定參數 |
示例
$("#flipbook").turn("direction", "rtl");
設置顯示方式,一個視圖中只顯示一頁(
single
)或者一個視圖中顯示兩頁(double
)
若是使用single
的顯示方式,則會給flipbook
添加overflow:hidden
樣式
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
displayMode | string | 設置顯示方式 | 必須手動設定參數 |
示例
$("#flipbook").turn("display", "single");
禁用或啓用效果。若是禁用,則用戶不能修改該頁面
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
disable | boolean | 禁用或啓用效果 | 必須手動設定參數 |
示例
$("#flipbook").turn("disable", true);
若是flipbook中存在相應頁面則返回true
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
pageNumber | number | 要查看是否存在頁面的頁碼 | 必須手動設定參數 |
示例
function checkPage(page) { if ($("#flipbook").turn("hasPage", page)) { alert("Page "+page+" is already in the flipbook"); } } // Check if page 1 is in the flipbook checkPage(1);
轉向上一頁的視圖
該方法沒有參數
示例
$("#flipbook").turn("previous");
也能夠轉換兩個視圖
$("#flipbook").turn("previous").turn("previous");
轉向下一頁的視圖
該方法沒有參數
示例
$("#flipbook").turn("next");
也能夠轉換兩個視圖
$("#flipbook").turn("next").turn("next");
檢測jq選擇器中是否建立了turn.js的實例
示例
if (!$("#flipbook").turn("is")) { // Create a new flipbook $("#flipbook").turn(); }
將視圖轉換到指定的頁面
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
page | number | 要跳轉到的頁面的頁碼 | 必須手動設定參數 |
示例
// 跳轉到第10頁 $("#flipbook").turn("page", 10);
設置pages屬性值。若是當前的pages值大於設置的pages值,則會移出flipbook中多出去的這一部分頁面
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
pages | number | 值爲當前flipbook中頁面的總數 | 必須手動設定參數 |
示例
$("#flipbook").turn("pages", 5);
$("#flipbook").turn("hasPage", 10); // It’s true. $("#flipbook").turn("pages", 5); // Sets 5 pages $("#flipbook").turn("hasPage", 10); // Returns false
在指定的頁面角顯示翻起頁面的動畫效果
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
corner | string | 設置指定的角 | 必須手動設定參數 |
animate | boolean | true | animation |
示例
// Shows a peeling page at the bottom right corner $("#flipbook").turn("peel", "br");
返回包含兩個值得數組,第一個數值的含義是==下一個包含在dom樹中頁面的頁碼==,第二個數值的含義是在範圍中的最後一個頁碼。這個範圍通常知足以下關係:
range[0] <= $("#flipbook").turn("page") <= range[1]
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
pageNumber | number | 在範圍內的頁碼 | $("#flipbook").turn("page") |
示例 爲了可以動態的添加頁面,可使用range方法
var range = $("#flipbook").turn("range", 10); for (var page = range[0]; page<=range[1]; page++){ if (!$("#flipbook").turn("hasPage", page)) { $("#flipbook").turn("addPage", $("<div />"), page); } }
移除指定頁面
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
pageNumber | number | 須要移出的頁面 | 必須手動指定值 |
示例
// Delete the page 10 $("#flipbook").turn("removePage", 10);
從新計算全部頁面的尺寸和位置
該方法沒有參數
示例
$("#flipbook").turn("resize");
設置flipbook的width和height
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
width | number | flipbook的寬 | 必須手動指定值 |
height | number | flipbook的高 | 必須手動指定值 |
示例
// Resize the flipbook to 1000x600 $("#flipbook").turn("size", 1000, 600);
中止當前的過渡動畫 該方法沒有參數
示例
// 轉到第十頁而且取消過渡動畫 $("#flipbook").turn("page", 10).turn(‘stop’);
得到當前的發行版本信息
示例
$("#flipbook").turn("version"); // Output is 4.0.6
放大或縮小flipbook的尺寸,根據放大係數更改flipbook的寬和高。若是放大係數爲1,則保持原尺寸不進行縮放
參數 | 數據類型 | 描述 | 默認值 |
---|---|---|---|
factor | number | 放大或縮小的比例係數 | 必須手動指定值 |
示例
// Reduce the size in half of the flipbook $("#flipbook").turn("zoom", 0.5);
銷燬zoom viewport
若是flipbook被其destory方法銷燬,那麼zoom viewport會自動的銷燬
該方法沒有參數
示例
$("#zoom-viewport").turn("destroy");
放大flipbook
該方法沒有參數
示例
$("#zoom-viewport").turn("zoomIn");
還原flipbook
該方法沒有參數
示例
$("#zoom-viewport").turn("zoomOut");
事件能夠支持定義在特殊時刻的行爲。有兩種不一樣的方法能夠定義
當添加事件監聽器時,會須要構造函數在建立flipbook前添加監聽器(when),例如
$("#flipbook").turn({when: { turning: function(event, page, pageObject) { // Implementation } } });
jquery提供了一個bind方法來給元素綁定監聽器。能夠爲一個事件使用bind去添加你須要的任意多的監聽器,例如
$("#flipbook").bind("turning", function(event, page, pageObject) { // Implementation });
若是option 的 prefix的值爲true,那麼須要加一個前綴turn,以下
$("#flipbook").bind("turn.turning", function(event, page, pageObject) { // Implementation });
第一個全部監聽函數共享的參數是事件對象,容許你操縱擴展和默認的事件,一些時間的後面能夠跟隨一個動做,例如能夠轉動頁面。所以,能夠經過event.preventDefault()來阻止默認操做。在事件函數中,不必再返回false去阻止默認行爲
當頁面過渡動畫結束時觸發事件
參數 | 數據類型 | 描述 |
---|---|---|
event | object | 事件對象 |
pageObject | object | 頁面對象 |
pageTurned | boolean | 若是轉到的是這個頁面,返回true |
示例
$("#flipbook").bind("end", function(event, pageObject, turned){ alert("turn.end:" +pageObject.page); });
當前頁碼爲1時觸發該事件
參數 | 數據類型 | 描述 |
---|---|---|
event | object | 事件對象 |
示例
$("#flipbook").bind("first", function(event) { alert("You are at the beginning of the flipbook"); });
在當前頁碼爲最後一頁的時候觸發該事件
參數 | 數據類型 | 描述 |
---|---|---|
event | object | 事件對象 |
示例
$("#flipbook").bind("last", function(event) { alert("You are at the end of the flipbook"); });
在某些處於當前頁面範圍內的頁面被請求時觸發該事件
參數 | 數據類型 | 描述 |
---|---|---|
event | object | 事件對象 |
pages | array | 須要被添加頁面的頁碼的數組 |
示例
$("#flipbook").bind("missing", function(event, pages) { for (var i = 0; i < pages.length; i++) { $(this).turn("addPage", $("<div />"), pages[i]); } });
在頁面的摺疊動畫效果開始時觸發該動畫。換句話說,在顯示摺疊起來的頁面以前觸發該動畫
參數 | 數據類型 | 描述 |
---|---|---|
event | object | 事件對象 |
pageobject | object | 頁面對象 |
corner | string | 頁腳類型 |
默認行爲 |
---|
顯示頁腳摺疊起來的效果 |
示例 若是你想阻止當使用頁腳tl和tr時的動畫效果,可使用start時間而且阻止其默認行爲
$("#flipbook").bind("start", function(event, pageObject, corner) { if (corner=="tl" || corner=="tr") { event.preventDefault(); } });
當跳轉頁面以前觸發該事件
參數 | 數據類型 | 描述 |
---|---|---|
event | object | 事件對象 |
page | number | 頁碼 |
view | array | 新的view |
默認行爲 |
---|
跳轉頁面 |
示例
$("#flipbook").bind("turning", function(event, page, view) { alert("Turning the page to: "+page); });
能夠阻止頁面跳轉到第一頁
$("#flipbook").bind("turning", function(event, page, view) { if (page==1) { event.preventDefault(); } });
在頁面跳轉以後觸發該事件
參數 | 數據類型 | 描述 |
---|---|---|
event | object | 事件對象 |
page | number | 新的頁碼 |
view | array | 新的view |
示例
$("#flipbook").bind("turned", function(event, page, view) { alert("Page: "+page); });
當頁面的縮放尺寸發生改變的時候觸發該事件
參數 | 數據類型 | 描述 |
---|---|---|
event | object | 事件對象 |
newZoomValue | number | 新的縮放比例係數 |
currentZoomvalue | number | 當前的縮放比例係數 |
默認行爲 |
---|
更改縮放比例係數 |
示例
$("#flipbook").bind("zooming", function(event, newZoomValue, currentZoomValue) { alert("New zoom: "+currentZoomValue); });
當雙擊或雙點視圖元素時觸發該事件
參數 | 數據類型 | 描述 |
---|---|---|
event | object | 事件對象 |
示例
$("#zoom-view").bind("zoom.doubleTap", function(event) { if ($(this).zoom("value")==1) { $(this).zoom("zoomIn", event); } else { $(this).zoom("zoomOut"); } });