大发3D

大发3D
cms大发3D网站系统、政府cms定制开发

广州网站建设大发3D-阅速大发3D

报纸大发3D网站内容大发3D一体化报刊软件联系电话
/
http://hinaidori.com/
广州网站建设大发3D
您当前位置:首页>网站技术

网站技术

turn.js中文api

大发3D时间:2018/10/30 18:12:47  作者:Admin  阅读:131  

turn.js (翻页效果)总结

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

大发3D1 html中引入<script type="text/javascript" src="js/turn.js"></script>

2 创建html

大发3D<div id="flipbook">

大发3D <div class="hard"> Turn.js </div>

大发3D <div class="hard"></div>

大发3D <div> Page 1 </div>

<div> Page 2 </div>

<div> Page 3 </div>

<div> Page 4 </div>

<div class="hard"></div>

大发3D <div class="hard"></div>

大发3D</div>

3 javascript 部分

$("#flipbook").turn({

width: 400,

height: 300,

autoCenter: true

});

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

选项:

(1)acceleration:设置硬件加速模式,对于触摸设备,此值必须为真。

acceleration:true;

大发3D(2)direction:指定flipbook从左到右(DIR=ltr,默认值)或右向左(DIR=rtl)的方向。

a.$("#flipbook").turn({

大发3D direction:'rtl'

})

b.<div id="flipbook" dir="rtl"></div>

c.#flipbook{

direction:rtl

}

(3)duration:设置翻页的速度

duration:600 如果设置为0 则不会产生翻页效(4) gradients:翻页过程中显示渐变和阴影

大发3D gradients:true

(5) width:页面的宽度 height:页面的高度

width:num height:num

(6) elevation:转换期间页面的高度

elevation:0

(7) page:初始化时设置页面个数

page:1

大发3D(8) pages:设置任意数量的页面。如果页面的数量大于#flipbook中元素的数量,使用addPage方法动态地添加这些页面。

大发3D $("#flipbook").children().length()

(9) when:事件侦听器。键必须在事件列表中使用

$("#flipbook").turn({

when:{

turned: function(e, page) {

if(page==1){

}

if(page==2){

}

}

}

})

属性:

(1) animating:当折叠的页面显示时返回true,

大发3D function isAnimating() {

if ($("#flipbook").turn("animating")) {

alert('Animating a page!');

}

}

(2)direction: 返回当前翻页的方向

大发3D $("#flipbook).turn("direction")

(3)display:获取当前显示的是单页还是双页

$("#flipbook).turn("display")

大发3D (4)page:获取当前页面为第几页

$("#flipbook).turn("page")

(5)pages:获取总共有多少页

$("#flipbook").turn("pages")

大发3D (6)size:获取flipbook的高宽

$("#flipbook").turn("size") 获取出有两个值 size.width 和 size.height

方法:

大发3D (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:设置单页还是双页

大发3D $("#flipbook").turn("display","single")

大发3D (5) next 把视图转到下一个

$("#flipbook").turn("next")

大发3D $("#flipbook").turn("next").turn("next")

(6) options:更改选项的值

$("#flipbook").turn("options",{display:"single",duration:})

(7) page:跳到指定的页面

大发3D $("#fllipbook").turn("page",10)

大发3D (8) previous:转到前面的视图

大发3D $("#flipbook").turn("previous")

(9) removepage:删除指定的页面

$("#flipbook").turn("removepage",10)

大发3D (10) resize:重新计算页面的大小

大发3D $("flipbook").turn("resize")

(11) stop:停止当前的过渡

大发3D $("#flipbook").turn("page",10).turn("stop")

(12)version:获取当前大发3D的版本

$("#flipbook").turn("version")

(13)zoom:flipbook的缩放比例

大发3D $("#flipbook").turn("zoom",0.5) 例如当值为0.5时 缩小为原来的一半 当值为1时 则不改变大小

事件:

大发3D (1) end:事件在页面停止时触发

大发3D $("#flipbook").bind("end",function(event,pageobject,turned){

alert("turn.end:"+pageobject.page)

})

(2)first:当当前页面为1时触发此事件

$("#flipbook").bind("first",function(event){

大发3D alert("page1")

})

(3)last:当当前页面为最后一页时触发此事件

$("#flipbook").bind("last",function(event){

alert("page_last")

})

大发3D (4)missing:当当前范围需要某些页面时 触发此事件

大发3D $("#flipbook").bind("missing",function(event,pages){

大发3D for(var i=0;i<pages.length;i++){

大发3D $(this).turn("addpage",$("<div/>"),pages[i])

}

})

(10) addpage:将页面插入到flipbook

大发3D element=$("<div/>").html("loading...")

$("#flipbook").turn("addpage",element,10) 插入第10页

(11) start:页面启动时触发

$("#flipbook").bind("start",function(event,pageobject,corner){

大发3D if(corner=="tl"||corner=="tr"){

大发3D event.preventDefault();

}

})

大发3D 当翻动左角和右角时,禁止启动动画

(12)turning:翻页之前被启动

大发3D $("#flipbook").bind("turning",function(event,page,view){

alert("turning the page to"+page)

})

翻页之前 弹出即将翻开的是第几页

大发3D (13)turned:翻页完成之后启动

大发3D $("#flipbook").bind("turned",function(event,page,view){

大发3D alert("page"+page)

})

大发3D (14)zooming:当缩放改变时触发此事件

大发3D $("#flipbook").bind("zooming", function(event, newZoomValue, currentZoomValue) {

alert("New zoom: "+currentZoomValue);

});

相关文章
turn.js
cms大发3D系统购买咨询
扫描关注 广州阅速软件大发3D有限大发3D
扫描关注 广州阅速大发3D