turn.js学习⼿册
因为最近⽤到turn来做⼀个⽐赛，所以学习了⼀下，但是现在没有中⽂的API⽂档，所以就⾃⼰整理了⼀下
1.flipbook的部署
1）引⼊jquery以及turn的js库
2）写⼊Html
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 sddsasdssddsd</div>
<div> Page 2 </div>
<div> Page 3 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
其中class=hard是为了模仿书本的封⽪
中间的div块则是书本的正⽂
3）写⼊js，最简单的⽰例如下
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: false
});
jquery学习在线教程采⽤的jQuery语法，简单的定义了此块的⾼宽以及是否居中
2.选项
1) width 、height（int）        定义宽⾼
2) autoCenter  （bool）          默认false，是否居中
3) page (int)                          设置初始化页⾯
4) acceleration(bool)          硬件加速，对于触摸设备，⼀定要设置true
5) direction("ltr"  "rtl") 书本翻动⽅向，默认从右向左(ltr) html css均可设置，详情见()
6) display("double"  "single")  展⽰⼀页或者两页，默认double
7) duration(毫秒)              设置翻页动画持续时间即翻页的快慢，默认600
8) gradients(bool)            设置翻页时是否显⽰翻页跟阴影
9) elevation                  Sets the elevation of the page during the transition.
10) pages                    设置任意数量的页⾯
11) when
12) turnCorners
3.属性
1）animating    当页⾯翻动时，返回true
function isAnimating() {
if ($("#flipbook").turn("animating")) {
alert('Animating a page!');
}
}
2）direction    返回页⾯的前进⽅向，左翻或者右翻，⽤法同上
3) display        返回当前的阅读模式，为单⾯或者双⾯显⽰
4) disabled      返回是否禁⽤，禁⽤返回true
5) page          返回当前页数
6) pages        返回总页数
7）size          返回⼤⼩，有两个键值  .width .height
8) options        返回初始化时的属性值，多个键值
9）view            返回视图
10）zoom          返回缩放因⼦
4.⽅法
1）addPage      增加新的页
element = $("<div />").html("");
$("#flipbook").turn("addPage", element, 10);
2) center          居中设置
3）destroy        销毁
$("#flipbook").turn("destroy")
4) direction      设置图书翻页⽅向
$("#flipbook").turn("direction", "rtl");
5）display        设置图书阅览⽅式，两页或者⼀页，同上
6) disable        设置页⾯禁⽤
7) hasPage        判断该页是否存在，返回bool
8) next              翻页
$("#flipbook").turn("next");
9) is        判断是否有turn实例
if (!$("#flipbook").turn("is")) {
// Create a new flipbook
$("#flipbook").turn();
}
10) page          跳转到指定页⾯
11) pages          设置页数，⼤于这个数量的将被删除
12) peel            显⽰⼀个翻页⾓
$("#flipbook").turn("peel", "br"); // 在右下⾓显⽰⾓
13) previous      返回上⼀个视图
$("#flipbook").turn("previous");
14) range          ⽤于增加界⾯，详情()
15) removePage    删除⼀个页⾯，两个参数
16) resize          重新计算页⾯的⼤⼩跟位置
17) size          三个参数，设置⼤⼩
18) stop          没有动画的将页⾯跳转$("#flipbook").turn("page", 10).turn('stop');
19) version        获取当前版本
20) zoom          缩放....
5.事件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。