turn.js（翻页效果）学习笔记

Turn.js是一个内置的jQuery翻页插件
1 html中引入<script type="text/javascript" src="js/turn.js"></script>
2  创建html

<div id="flipbook">

<div style="background-image:url(pages/01.jpg);"></div>

<div style="background-image:url(pages/02.jpg);"></div>

<div style="background-image:url(pages/03.jpg);"></div>

<div style="background-image:url(pages/04.jpg);"></div>

<div style="background-image:url(pages/05.jpg);"></div>

<div style="background-image:url(pages/06.jpg);"></div>

</div>

3 javascript 部分

if(b_ok){
var turnWidth = $('#cover').outerWidth(),
turnHeight = $('#cover').outerHeight();

$('.flipbook').turn({
width: turnWidth*2+20,
height: turnHeight,
elevation: 50,
gradients: true,
autoCenter: true,
display:'double',
when: { turning: function(event, page, pageObject) {

} }
});

}
4.可用选项、属性、方法、事件、css类
　选项：
(1)acceleration:设置硬件加速模式，对于触摸设备，此值必须为真。
   acceleration:true;