第24车厢-翻起来惹!页面翻页效果turn.js应用篇

本篇介绍可实现翻页效果的turn.js基本参数及基本用法

:哈罗!
:(叫谁?)
:叫你啦!
:喔。怎?
:不知道你会不会有这样的需求?要你做一个像是电子书可以翻页的效果呢?
:喔～～～有阿!(飘过来
:那我只好....

一般来说看你的需求，看是要用线上直接转好的，或者用程序写
线上转好的，例如Flipsnack...等其他

可以将PDF转换为HTML5－制作Flipbook电子书翻书特效，可嵌入到网站中。
官网:https://www.flipsnack.com/
介绍文:https://www.techmarks.com/flipsnack-flipbook/

那如果用程序写的话，就可参考turnjs，也就是我们这篇要介绍的

官网:http://www.turnjs.com/
官网参数:http://www.turnjs.com/turnjs4-api-docs.pdf

关於turn.js介绍先预告一下，会大该分为两篇写

第1篇:起手式/参数介绍，用於一般图片/文字翻页
第2篇:将前篇pdf.js利用turn.js 将pdf变成有翻页效果

首先先来看看官网版的起手式吧！

起手式(CDN版)

引用

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script src='http://www.turnjs.com/lib/turn.min.js'></script> 

HTML

• 照<div>分页数
• <div class="hard"></div> 加这个会产生空白页，看成果就会懂(双页翻时，就会用到，可加可不加)

 <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>

▲你也可以<div>塞<img>，就会变图片翻页

JQ

<script>
  $("#flipbook").turn({
    width: 400, //翻页检视的宽度
    height: 300,//翻页检视的高度
    autoCenter: true // 预设false是否居中
  });
</script>

另外，我在官网没看到CSS档，所以基本上没有样子，所以我找到一个参考档，可以先加以下CSS看看

参考档程序码:http://jsfiddle.net/sach_a/cf6yR/1/

CSS

• 可於JQ上设置外层#flipbook的宽高{width:值}...，或者从CSS上设定，但如果你CSS设定了 JQ也设定了，最後会以JQ为准
• 会先设定 .page、.hard...等class(从上方HTML没看到的) ，是因为他run起来後会有这些class，看成果就会懂

<style>

body{
    overflow:hidden;
    background-color: black; 
}

#flipbook .page{
    width:100%;
    height:100%;
    text-align:center;
    background-color: #fff;
}

#flipbook  {
    background-color:#ccc;
}

#flipbook .odd{
    background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
    box-shadow:inset 0 0 5px #666;
}

#flipbook .even{
    background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
    box-shadow:inset 0 0 5px #666;
}
</style>

参考档程序码 http://jsfiddle.net/sach_a/cf6yR/1/

这样就完成啦！

补充

• run起来 HTML会自动产一些class 及 包裹的div
  

• JQ中设定的参数 autoCenter: true 跟false差别
  

其他常用参数

整体参数设定

$("selectorID").turn({
 参数:值
});

• 获取当前页面为第几页

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

$("#flipbook")是我们刚刚最外框的id名称

• 获取总共有多少页

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

• 翻到特定页数

$("#flipbook").turn("page", 10);

▲後面的数字是页数

• 翻到下一页

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

• 翻到上一页

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

• 设定书页显示双页或单页式

$("#flipbook").turn("display","single");

▲single是单页，预设为double

• 改变书页长宽

$("#flipbook").turn("size", 1000, 750);

▲第一个数字为width,第二个数字为height，此边设定无法用%
另外，这里及建置步骤的width，如果是双页式时，两页的宽是加起来1000，每页是500喔

• 设定缩放比例

$("#flipbook").turn("zoom",0.5) 

事件参数

• turning：翻页之前被启动的事件

$("#flipbook").bind("turning",function(event,page,view){
     alert("turning the page to"+page) //翻页之前 即将翻开的是第几页
})

• turned：翻页完成启动的事件

$("#flipbook").bind("turned",function(event,page,view){
    alert("page"+page) //翻完後要做的事情 例如写入页数
})

其他事件需自行加

• 书页RWD

$(window).resize(function(){
  $("#flipbook").turn("size", window.innerWidth*0.5,window.innerHeight*0.8);
})

//window.innerWidth 视窗宽 window.innerHeight视窗高
▲原本若无设定resize，是固定宽高，可以设定当resize时 比例多少

延伸推荐:其他范例档

有了以上参数後，我们就可以将原本的样子，新增一些按钮，例如上一页、下一页、放大/缩小比例...等

范例档:https://codepen.io/hanzeljesheen/pen/zGLMQz?editors=1010

或者是制作像百货公司都会做的线上DM样子

范例档:https://jsfiddle.net/kmturley/b7hauk5c/

详细参数

可参考官网http://www.turnjs.com/turnjs4-api-docs.pdf
或是有其他人分享的中文版https://iter01.com/250492.html

那下篇我们就来介绍如何将pdf档变成有翻页效果的吧！

本篇参考文章:
https://ballaediworkshop.blogspot.com/2017/11/turnjs-turnjs-rwd.html
https://www.cnblogs.com/cy1121/p/8260159.html
https://medium.com/creative-technology-concepts-code/responsive-magazine-using-turn-js-ea793e599e0c