基于jquery的插件turn.js学习笔记（一个可以实现3d书籍展示效果的插件）_jquery书本翻页3d动画特效

基于jquery的插件turn.js学习笔记

简介

turn.js是一个可以实现3d书籍展示效果的jq插件，使用html5和css3来执行效果。可以很好的适应于ios和安卓等触摸设备。

---

How it works？

下面是官网展示的最简单的一个应用实例

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都有单独的构造函数

• turn的构造函数

语法

 

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

事例

 

$("#flipbook").turn({page: 1, acceleration: true, gradients: true});

• zoom的构造函数

语法

 

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

---

OPTIONS

Turn Options

• acceleration:boolean 默认值true

使用触摸时设备时值必须为true

• autoCenter:boolean 默认值false

是否居中

• direction:string默认值ltr

指定翻页的方向，ltr：从左到右；rtl：从右到左

示例

在options中配置属性

 

$("#flipbook").turn({direction:"rtl"});

在标签中直接设置属性

 

<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 = $("<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属性
如果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;
}

• destory

消除flipbook。从dom树，内存和事件监听器中删除所有页面
删除flipbook的同时也会自动删除zoom（如果定义了的话）
该方法没有参数

示例

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

也可以删除这些页面的容器#flipbook,如下

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

• direction

设置flipbook的翻页方向（ltr,rtl）

示例

 

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

• display

设置显示方式，一个视图中只显示一页（single）或者一个视图中显示两页（double）
如果使用single的显示方式，则会给flipbook添加overflow:hidden样式

示例

 

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

• disable

禁用或启用效果。如果禁用，则用户不能修改该页面

示例

 

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

• hasPage

如果flipbook中存在相应页面则返回true

示例

 

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

将视图转换到指定的页面

示例

 

// 跳转到第10页
$("#flipbook").turn("page", 10);

• pages

设置pages属性值。如果当前的pages值大于设置的pages值，则会移出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

在指定的页面角显示翻起页面的动画效果

示例

 

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

• range

返回包含两个值得数组，第一个数值的含义是==下一个包含在dom树中页面的页码==，第二个数值的含义是在范围中的最后一个页码。这个范围一般满足如下关系：range[0] <= $("#flipbook").turn("page") <= range[1]

示例 为了能够动态的添加页面，可以使用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

移除指定页面

示例

 

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

• resize

重新计算所有页面的尺寸和位置

该方法没有参数

示例

 

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

• size

设置flipbook的width和height

示例

 

// 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，则保持原尺寸不进行缩放

示例

 

// 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

当页面过渡动画结束时触发事件

示例

 

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

• first

当前页码为1时触发该事件

示例

 

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

• last

在当前页码为最后一页的时候触发该事件

示例

 

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

• missing

在某些处于当前页面范围内的页面被请求时触发该事件

示例

 

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

• start

在页面的折叠动画效果开始时触发该动画。换句话说，在显示折叠起来的页面之前触发该动画

示例 如果你想阻止当使用页脚tl和tr时的动画效果，可以使用start时间并且阻止其默认行为

 

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

• turning

当跳转页面之前触发该事件

示例

 

$("#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

在页面跳转之后触发该事件

示例

 

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

• zooming

当页面的缩放尺寸发生改变的时候触发该事件

示例

 

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

Zoom Events

• doubleTap

当双击或双点视图元素时触发该事件

示例

 

$("#zoom-view").bind("zoom.doubleTap", function(event) {
    if ($(this).zoom("value")==1) {
        $(this).zoom("zoomIn", event);
    } else {
        $(this).zoom("zoomOut");
    }
});

作者：晨昏线_f197
链接：https://www.jianshu.com/p/b4149e0aff99
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。