turn.js （翻页效果）总结

Turn.js是一个内置的jQuery翻页插件

1 html中引入<script type="text/javascript" src="js/turn.js"></script>

2  创建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>

3 javascript 部分

$("#flipbook").turn({ ?width: 400, ?height: 300, ?autoCenter: true});

4.可用选项、属性、方法、事件、css类

　选项：

(1)acceleration:设置硬件加速模式，对于触摸设备，此值必须为真。
 ??acceleration:true;
(2)direction:指定flipbook从左到右(DIR=ltr，默认值)或右向左(DIR=rtl)的方向。
　　a.$("#flipbook").turn({
　　　　direction:‘rtl‘
　　　})
　　b.<div id="flipbook" dir="rtl"></div>
　　c.#flipbook{
　　 ?　　direction:rtl
 ?　　}
(3)duration:设置翻页的速度 
　　duration:600 如果设置为0 则不会产生翻页效(4) gradients：翻页过程中显示渐变和阴影

　　 gradients:true
(5) width:页面的宽度 height:页面的高度
 ???width:num height:num
(6) elevation：转换期间页面的高度
 ???elevation:0
(7) page：初始化时设置页面个数
　　 page:1
(8) pages:设置任意数量的页面。如果页面的数量大于#flipbook中元素的数量，使用addPage方法动态地添加这些页面。
 ???$("#flipbook").children().length()
(9) when:事件侦听器。键必须在事件列表中使用
 ???$("#flipbook").turn({
　　　　when:{
　　　　　　turned: function(e, page) {
　　　　　　　　if(page==1){
　　　　　　　　}
　　　　　　　　if(page==2){
　　　　　　　　}
　　　　　　}
　　　　}
　　})
属性：
(1) animating:当折叠的页面显示时返回true，

　　function isAnimating() { ?　　if ($("#flipbook").turn("animating")) { ???　　alert(‘Animating a page!‘); ?　　}　　}
 ?(2)direction: 返回当前翻页的方向
 ????$("#flipbook).turn("direction")
 ?(3)display：获取当前显示的是单页还是双页
 ????$("#flipbook).turn("display")
 ?(4)page:获取当前页面为第几页
 ????$("#flipbook).turn("page")
 ?(5)pages:获取总共有多少页
 ???$("#flipbook").turn("pages")
 ?(6)size：获取flipbook的高宽
 ???$("#flipbook").turn("size") ?获取出有两个值 size.width 和 size.height
 方法:
 ?(1) addpage:将页面添加到flipbook中 
 ?????例如插入第10页:
 ?????element=$("<div />").html("loading");
　　　$("#flipbook").turn("addpagge",element,10)
 ??(2) destroy：删除所有页面
 ??????$("#flipbook").turn("destroy").remove();
 ??(3) direction :设置flipbook 的方向
 ??????$("#flipbook").turn("direciton","rtl")
 ??(4) display：设置单页还是双页
 ??????$("#flipbook").turn("display","single") ??
 ??(5) next 把视图转到下一个
 ??????$("#flipbook").turn("next")
 ??????$("#flipbook").turn("next").turn("next")
 ??(6) options:更改选项的值 
 ??????$("#flipbook").turn("options",{display:"single",duration:})
 ??(7) page：跳到指定的页面
 ??????$("#fllipbook").turn("page",10)
 ??(8) previous:转到前面的视图
 ???　 $("#flipbook").turn("previous")
 ??(9) removepage：删除指定的页面
 ??????$("#flipbook").turn("removepage"，10)
 ??(10) resize:重新计算页面的大小
 ?????$("flipbook").turn("resize")
 ??(11) stop:停止当前的过渡
 ?????$("#flipbook").turn("page",10).turn("stop")