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")
$("#flipbook").turn("page",10).turn("stop")
(12)version：获取当前发布的版本
$("#flipbook").turn("version")
(13)zoom:flipbook的缩放⽐例
$("#flipbook").turn("zoom",0.5) 例如当值为0.5时缩⼩为原来的⼀半当值为1时则不改变⼤⼩事件：
(1) end：事件在页⾯停⽌时触发
$("#flipbook").bind("end",function(event,pageobject,turned){
alert("d:"+pageobject.page)
})
(2)first：当当前页⾯为1时触发此事件
$("#flipbook").bind("first",function(event){
alert("page1")
})
(3)last：当当前页⾯为最后⼀页时触发此事件
$("#flipbook").bind("last",function(event){
alert("page_last")
})
(4)missing：当当前范围需要某些页⾯时触发此事件
$("#flipbook").bind("missing",function(event,pages){
for(var i=0;i<pages.length;i++){
$(this).turn("addpage",$("<div/>"),pages[i])
}
})
(10) addpage：将页⾯插⼊到flipbook
element=$("<div/>").html("")
$("#flipbook").turn("addpage",element,10) 插⼊第10页
(11) start：页⾯启动时触发
$("#flipbook").bind("start",function(event,pageobject,corner){
if(corner=="tl"||corner=="tr"){
event.preventDefault();
}
})
当翻动左⾓和右⾓时，禁⽌启动动画
(12)turning：翻页之前被启动
$("#flipbook").bind("turning",function(event,page,view){
alert("turning the page to"+page)
})
翻页之前弹出即将翻开的是第⼏页
(13)turned：翻页完成之后启动
$("#flipbook").bind("turned",function(event,page,view){
alert("page"+page)
})
(14)zooming：当缩放改变时触发此事件
$("#flipbook").bind("zooming", function(event, newZoomValue, currentZoomValue) { alert("New zoom: "+currentZoomValue);
});
事例代码：
//这⾥先引⼊两个外部cdn⽂件，⽅便打开查看效果：
<script type="text/javascript" src="code.jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="cdn.bootcss/turn.js/3/turn.min.js"></script>
然后添加简单的样式；
<style type="text/css">
body {
background: #ccc;
}
#book {
width: 800px;
height: 500px;
}
#book .turn-page {
background-color: white;
}
#book .cover {
background: #333;
}
#book .cover h1 {
color: white;
text-align: center;
font-size: 50px;
line-height: 500px;
margin: 0px;
}
#book .loader {
background-image: url(loader.gif);
width: 24px;
height: 24px;
display: block;
position: absolute;
top: 238px;
left: 188px;
}
#book .data {
text-align: center;
font-size: 40px;
color: #999;
line-height: 500px;
}
#controls {
width: 800px;
text-align: center;
margin: 20px 0px;
font: 30px arial;
}
#controls input,
#controls label {
font: 30px arial;
}
#book .odd {
background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%); background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
}
#book .even {
background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%); background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%); background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
}
</style>
//接着是布局：
<div id="book">
<div class="cover">
<!-- 这⾥是翻书页⾯ -->
<!-- 这⾥是翻书页⾯ -->
</div>
</div>
<!-- 这⾥是分页数据 -->
<div id="controls">
<label for="page-number">Page:</label> <input type="text" size="3" id="page-number"> of <span
id="number-pages"></span>
</div>
<!-- 以下是关键的js代码 -->
<script type="text/javascript">
var numberOfPages = 100;
function addPage(page, book) {
if (!book.turn('hasPage', page)) {
var element = $('<div />', { 'class': 'page ' + ((page % 2 == 0) ? 'odd' : 'even'), 'id': 'page-' + page }).html('<i class="loader"></i>'); book.turn('addPage', element, page);
setTimeout(function () {
element.html('<div class="data">Data for page ' + page + '</div>');
}, 10);
}
}
$(window).ready(function () {
$('#book').turn({
acceleration: true,
pages: numberOfPages,
elevation: 50,
gradients: !$.isTouch,
when: {
turning: function (e, page, view) {
var range = $(this).turn('range', page);
for (page = range[0]; page < range[1]; page++)
addPage(page, $(this));
},
turned: function (e, page) {
$('#page-number').val(page);
}
jquery翻书效果}
});
$('#number-pages').html(numberOfPages);
$('#page-number').keydown(function (e) {
if (e.keyCode == 13)
$('#book').turn('page', $('#page-number').val());
});
});
$(window).bind('keydown', function (e) {
if (e.target && e.LowerCase() != 'input')
if (e.keyCode == 37)
$('#book').turn('previous');
else if (e.keyCode == 39)
$('#book').turn('next');
});
</script>
<script>
$("#book").on("touchstart", function (e) {
// 判断默认⾏为是否可以被禁⽤
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论