基於jquery的插件turn.js學習筆記

基於jquery的插件turn.js學習筆記

簡介

turn.js是一個能夠實現3d書籍展現效果的jq插件,使用html5和css3來執行效果。能夠很好的適應於ios和安卓等觸摸設備。css


How it works?

下面是官網展現的最簡單的一個應用實例html

1.編寫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>

2.編寫js部分

$("#flipbook").turn({
  width: 400,
  height: 300,
  autoCenter: true
});

API參考

構造函數

這個構造函數定義了filpbook和zoom在哪裏建立,所以這個構造函數只能被調用一次而且不能被省略。flipbook和zoom都有單獨的構造函數html5

  • turn的構造函數

語法
$("#flipbook").turn([options]);
事例
$("#flipbook").turn({page: 1, acceleration: true, gradients: true});
  • zoom的構造函數

語法
$("#zoom-viewport").zoom(options);

OPTIONS

Turn 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 or tl,tr or bl,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()

設置頁面寬度

Zoom Options

  • 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
	}
}
});

Properties

flipbook的Properties

語法
$("#flipbook").turn("propertyName");
  • animating

當前頁面若是有動畫效果(翻頁的時候)返回true

示例

function isAnimating() {
  if ($("#flipbook").turn("animating")) {
    alert('Animating a page!');
  }
}
  • direction

返回當前書籍的翻頁方向,返回值爲ltr或rtl

示例

$("#flipbook").turn("direction");
  • display

返回當前書籍的顯示方式,返回值爲double或single

示例

alert("The current display is: " + $("#flipbook").turn("display"));
  • disabled

是否禁用,禁用返回true

  • page

獲取當前的頁面值

示例

alert("The current page is: "+$("#flipbook").turn("page"));
  • pages

獲取當前書的總頁面數

示例

alert("#flipbook has " + $("#flipbook").turn("pages") + " pages");
  • pages

獲取當前書的尺寸,返回值爲一個對象,包括兩個內容:width和height

示例

var size = $("#flipbook").turn("size");
alert("Width: "+size.width + ", Height:"+size.height);
  • options

獲取初始化書籍時設置的options

示例

var duration = $("#flipbook").turn("options").duration;
alert("The duration of the transition is "+duration);
  • view

獲取當前的view

示例

var view = $("#flipbook").turn("view").join(" and ");
alert("Current view: "+view);
  • zoom

獲取flipbook的縮放係數因子。默認值爲1,表明當使用尺寸相關方法時flipbook會使用與原始尺寸相同的尺寸(不會改變尺寸)

示例

var zoom = $("#flipbook").turn("zoom");
alert("Current zoom: "+zoom);

zoom的Properties

  • value

返回當前的zoom值

示例

function zoomedIn() {
    //值爲1表明沒有進行縮放
	if ($("#zoom-viewport").turn("value")==1)
		alert("No zoom");
    //值大於1表明當前有縮放效果
	else if ($("#zoom-viewport").turn("value")>1)
		alert("Zoomed In");
}

Methods

Turn Methods

方法用於執行諸如翻頁或者更改屬性狀態等操做

語法

$("#flipbook").turn('method name'[, argument1, argument2]);

當方法沒有返回值時,能夠與另外一個方法鏈接

$("#flipbook").turn("method1").turn("method2");
  • addPage

向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);
  • center

根據可見的頁面數量來決定flipbook的center。這個方法修改flipbook的css屬性margin-left 以致於將flipbook放置於中心。所以若是須要修改margin-left,最好須要將flipbook放置到一個容器div中來方便修改其margin屬性
若是flipbookoptionautoCenter設置爲了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;
}
  • destory

消除flipbook。從dom樹,內存和事件監聽器中刪除全部頁面
刪除flipbook的同時也會自動刪除zoom(若是定義了的話) 該方法沒有參數

示例

$("#flipbook").turn("destroy");

也能夠刪除這些頁面的容器#flipbook,以下

$("#flipbook").turn("destroy").remove();

  • direction

設置flipbook的翻頁方向(ltr,rtl)

參數 數據類型 描述 默認值
direction string ltr or rtl 必須手動設定參數

示例

$("#flipbook").turn("direction", "rtl");
  • display

設置顯示方式,一個視圖中只顯示一頁(single)或者一個視圖中顯示兩頁(double
若是使用single的顯示方式,則會給flipbook添加overflow:hidden樣式

參數 數據類型 描述 默認值
displayMode string 設置顯示方式 必須手動設定參數

示例

$("#flipbook").turn("display", "single");
  • disable

禁用或啓用效果。若是禁用,則用戶不能修改該頁面

參數 數據類型 描述 默認值
disable boolean 禁用或啓用效果 必須手動設定參數

示例

$("#flipbook").turn("disable", true);
  • hasPage

若是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);
  • previous

轉向上一頁的視圖
該方法沒有參數

示例

$("#flipbook").turn("previous");

也能夠轉換兩個視圖

$("#flipbook").turn("previous").turn("previous");
  • next

轉向下一頁的視圖
該方法沒有參數

示例

$("#flipbook").turn("next");

也能夠轉換兩個視圖

$("#flipbook").turn("next").turn("next");
  • is

檢測jq選擇器中是否建立了turn.js的實例

示例

if (!$("#flipbook").turn("is")) {
	// Create a new flipbook 
	$("#flipbook").turn();
}
  • page

將視圖轉換到指定的頁面

參數 數據類型 描述 默認值
page number 要跳轉到的頁面的頁碼 必須手動設定參數

示例

// 跳轉到第10頁
$("#flipbook").turn("page", 10);
  • pages

設置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
  • peel

在指定的頁面角顯示翻起頁面的動畫效果

參數 數據類型 描述 默認值
corner string 設置指定的角 必須手動設定參數
animate boolean true animation

示例

// Shows a peeling page at the bottom right corner
$("#flipbook").turn("peel", "br");
  • range

返回包含兩個值得數組,第一個數值的含義是==下一個包含在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); 
	}
}
  • removePage

移除指定頁面

參數 數據類型 描述 默認值
pageNumber number 須要移出的頁面 必須手動指定值

示例

// Delete the page 10
$("#flipbook").turn("removePage", 10);
  • resize

從新計算全部頁面的尺寸和位置
該方法沒有參數

示例

$("#flipbook").turn("resize");
  • size

設置flipbook的width和height

參數 數據類型 描述 默認值
width number flipbook的寬 必須手動指定值
height number flipbook的高 必須手動指定值

示例

// Resize the flipbook to 1000x600 
$("#flipbook").turn("size", 1000, 600);
  • stop

中止當前的過渡動畫 該方法沒有參數

示例

// 轉到第十頁而且取消過渡動畫
$("#flipbook").turn("page", 10).turn(‘stop’);
  • version

得到當前的發行版本信息

示例

$("#flipbook").turn("version");
// Output is 4.0.6
  • zoom

放大或縮小flipbook的尺寸,根據放大係數更改flipbook的寬和高。若是放大係數爲1,則保持原尺寸不進行縮放

參數 數據類型 描述 默認值
factor number 放大或縮小的比例係數 必須手動指定值

示例

// Reduce the size in half of the flipbook
$("#flipbook").turn("zoom", 0.5);

Zoom Methods

  • destory

銷燬zoom viewport
若是flipbook被其destory方法銷燬,那麼zoom viewport會自動的銷燬
該方法沒有參數

示例

$("#zoom-viewport").turn("destroy");
  • zoomIn

放大flipbook
該方法沒有參數

示例

$("#zoom-viewport").turn("zoomIn");
  • zoomOut

還原flipbook
該方法沒有參數

示例

$("#zoom-viewport").turn("zoomOut");

Events

Turn Events

事件能夠支持定義在特殊時刻的行爲。有兩種不一樣的方法能夠定義

1.在options中使用

當添加事件監聽器時,會須要構造函數在建立flipbook前添加監聽器(when),例如

$("#flipbook").turn({when: {
	turning: function(event, page, pageObject) {
		// Implementation
	}
}
});
2. 用bind方法

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去阻止默認行爲

事件
  • end

當頁面過渡動畫結束時觸發事件

參數 數據類型 描述
event object 事件對象
pageObject object 頁面對象
pageTurned boolean 若是轉到的是這個頁面,返回true

示例

$("#flipbook").bind("end", function(event, pageObject, turned){
  alert("turn.end:" +pageObject.page);
});
  • first

當前頁碼爲1時觸發該事件

參數 數據類型 描述
event object 事件對象

示例

$("#flipbook").bind("first", function(event) {
	alert("You are at the beginning of the flipbook");
});
  • last

在當前頁碼爲最後一頁的時候觸發該事件

參數 數據類型 描述
event object 事件對象

示例

$("#flipbook").bind("last", function(event) {
	alert("You are at the end of the flipbook");
});
  • missing

在某些處於當前頁面範圍內的頁面被請求時觸發該事件

參數 數據類型 描述
event object 事件對象
pages array 須要被添加頁面的頁碼的數組

示例

$("#flipbook").bind("missing", function(event, pages) {
  for (var i = 0; i < pages.length; i++) {
    $(this).turn("addPage", $("<div />"), pages[i]);
  }
});
  • start

在頁面的摺疊動畫效果開始時觸發該動畫。換句話說,在顯示摺疊起來的頁面以前觸發該動畫

參數 數據類型 描述
event object 事件對象
pageobject object 頁面對象
corner string 頁腳類型
默認行爲
顯示頁腳摺疊起來的效果

示例 若是你想阻止當使用頁腳tl和tr時的動畫效果,可使用start時間而且阻止其默認行爲

$("#flipbook").bind("start", function(event, pageObject, corner) {
  if (corner=="tl" || corner=="tr") {
    event.preventDefault();
  }
});
  • turning

當跳轉頁面以前觸發該事件

參數 數據類型 描述
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();
  }
});
  • turned

在頁面跳轉以後觸發該事件

參數 數據類型 描述
event object 事件對象
page number 新的頁碼
view array 新的view

示例

$("#flipbook").bind("turned", function(event, page, view) {
  alert("Page: "+page);
});
  • zooming

當頁面的縮放尺寸發生改變的時候觸發該事件

參數 數據類型 描述
event object 事件對象
newZoomValue number 新的縮放比例係數
currentZoomvalue number 當前的縮放比例係數
默認行爲
更改縮放比例係數

示例

$("#flipbook").bind("zooming", function(event,  newZoomValue, currentZoomValue) {
  alert("New zoom: "+currentZoomValue);
});

Zoom Events

  • doubleTap

當雙擊或雙點視圖元素時觸發該事件

參數 數據類型 描述
event object 事件對象

示例

$("#zoom-view").bind("zoom.doubleTap", function(event) {
	if ($(this).zoom("value")==1) {
		$(this).zoom("zoomIn", event);
	} else {
		$(this).zoom("zoomOut");
	}
});
相關文章
相關標籤/搜索