turn.js

中文 API

初始化参数配置选项

<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>
<script type="text/javascript">
$("#flipbook").turn({
	acceleration: true, // 硬件加速，对于触摸设备，一定要设置true 
	autoCenter:true, // 居中显示 
	height: $("flipbook").height(), // 页面高度 
	width: $("#flipbook").width(), // 页面的宽度
	duration:600, // 翻动速度 
	page:1, // 初始化页面 
	pages:$("#flipbook").children().length, // 设置页面数量，如果页面设置的数量超过实际数量会动态添加页面                              
	gradients: true, // 在过渡期间显示渐变和阴影。 
	display:double, // 显示一个页面（single）或者俩个页面（double） 
	direction:'ltr', // 翻页动画的方向left-to-right :ltr,right-to-left:rtl 
	elevation:50, // 页面翻动时卷动的宽度 
	turnCorners:'bl,br', // 翻页动画开始的起始位置bl,br （左下，右下）tl,tr（左上，右上） or bl,tr（左下，右上）	 
	when:{} // 事件监听
</script>

特性属性

// 当页面正在翻动时返回true
$("#flipbook").turn("animating");
 
// 获取翻页动画的方向
$("#flipbook").turn("direction");
 
// 获取当前显示的是single or double
$("#flipbook").turn("display");
 
// 当页面
$("#flipbook").turn("page");
 
// 总页面
$("#flipbook").turn("pages");
 
// 获取尺寸width and height
var size = $("#flipbook").turn("size");
alert("Width: "+size.width + ", Height:"+size.height);		                                                                   
// 获取当前页码
$("#flipbook").turn("view")；
double：[0,1] [2,3] [4,5] [6,7] [8, 0]
single：[1] [2] [3] [4]；
 
// 获取所有的配置参数
$("#flipbook").turn("options")

方法方法

// 添加新的页面 element添加的dom，pageNumber添加的页码位置		                                                                   
 
$("#flipbook").turn("addPage", element，pageNumber);
 
// 删除flipbook下的所有页面，该方法没有参数
$("#flipbook").turn("destroy");
// 删除包括flipbook在内的所有元素
$("#flipbook").turn("destroy").remove();
 
// 改变翻动的方向
$("#flipbook").turn("direction", "rtl");
 
// 设置显示single或者double
$("#flipbook").turn("display", "single");
 
// 是否设置禁用 如果禁用将无法更改页面
$("#flipbook").turn("disable", true);
 
// 判断是否含有制定页码的页面
$("#flipbook").turn("hasPage", pageNumber);
 
// 下一页
$("#flipbook").turn("next");
 
// 上一页
$("#flipbook").turn("previous");
 
// 判断是否已经实例化
$("#flipbook").turn("is")
 
// 跳转指定页面
$("#flipbook").turn("page", 10);
 
// 设置页面数量 如果设置的数量小于实际数量，多余的将会被remove掉
$("#flipbook").turn("pages", 5);
 
// 指定位置显示页面翻卷的角
$("#flipbook").turn("peel", "br");
 
// 删除指定页面
$("#flipbook").turn("removePage", 10);
 
// 返回一个俩个数值的数组，
// 如果页面总数大于设置的pageNumber时返回[pageNumber - 2，pageNumber + 2] 
// 如果pages - 1 = pageNumber,返回[pageNumber - 3, pages]
// 例子
$('#flipbook').turn('pages',20);
var range = $('#flipbook').turn("range",20);
 
for (var page = range[0]; page<=range[1]; page++){
    if (!$('#flipbook').turn("hasPage", page)) {
        console.log(page)// 16,17,18,19,20
        $('#flipbook').turn("addPage", $("<div></div>"), page);
    }
}
$("#flipbook").turn("range", pageNumber);
 
// 设置页面宽高
$("#flipbook").turn("size", 1000, 600);
 
// 重置页面的大小及位置
$("#flipbook").turn("resize");
 
// 停止当前的切换
$("#flipbook").turn("stop");
 
// 获取turn版本
$("#flipbook").turn("version");
 
// 页面缩放
$("#flipbook").turn("zoom", 0.5);

事件活动

$("#flipbook").bind("first", function(event) {
	console.log('当前页面是第一页');
});
$("#flipbook").bind("last", function(event) {
	console.log('当前页面是最后一页');
});
$("#flipbook").bind("turning", function(event, page, view) {
    console.log('页面打开之前');
    console.log(page); // 当前页面
    console.log(view); // 返回一个页码的数组single:[1],double:[1,2]
});
 
$("#flipbook").bind("start", function(event, pageObject, corner) {                                                                 
    console.log('开始翻页');
    console.log(pageObject); // 返回页面对象
    console.log(corner); // 页面翻动触发位置
});
$("#flipbook").bind("end", function(event, pageObject, turned) {
    console.log('翻页停止');
    console.log(pageObject); // 返回页面对象
    console.log(turned); // 页面是否打开
});
$zine.bind("turned", function(event, page, view) {
    console.log('页面已打开');
    console.log(page); // 当前页面
    console.log(view); // 返回一个页码的数组single:[1],double:[1,2]
});
$("#flipbook").bind("turned", function(event, page, view) {
    console.log('翻页结束');
    console.log(page); // 当前页面
    console.log(view); // 返回一个页码的数组single:[1],double:[1,2]
});
$("#flipbook").bind("missing", function(event, pages) {
    console.log('添加了新的页面');
    console.log(pages); // 添加后的页面总数
 
});
$zine.bind("zooming", function(event,  newZoomValue, currentZoomValue) {
    console.log('页面被缩放了');
    console.log(newZoomValue); // 缩放比例
    console.log(currentZoomValue); // 原始比例
});

类

// 当display: 'double'时 addClass even 或者 odd
.even
.odd
 
 
// 当页面own-size 超出当前的大小，超出部分不隐藏
.fixed
 
// 页面翻动时的效果类似于一张硬纸
.hard
// 页面翻动时的效果类似于一张软纸（当前默认样式）
.sheet
 
// 指定一个页面的尺寸大小
.own-size
 
// 每个页面外部包个className是page的div,并且addClass名字是p[0-9]+的样式名                                                                
.page
.p[0-9]+
 
// 设置阴影的样式
.shadow