欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-07-01 15:31:18
...

基于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 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属性
    如果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）

参数 数据类型 描述 默认值
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");
    }
});

转载于:https://www.cnblogs.com/yuxi-G/p/yuxig.html

上一篇： Lucene分词器

下一篇： ActiveMQ 消息中间件

推荐阅读