目录
- 下载
- 文档
- 开始
- 构造方法
- 可配置项
- 方法
- 语法
- 事件
- 两种方式添加事件
- 自动翻页loading加载功能
- 案例
- CSS
- basic.css源码如下
- JS里面代码太多了,直接官网下载
- index.html源码如下
- 最终效果如下
下载
下载完里面有源码,好几种翻页效果,很不错~
官网
文档
接口文档
开始
构造方法
$('#flipbook').turn([options]);
可配置项
$('.flipbook').turn({width: 922, //宽度height: 600, //高度acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为trueautoCenter: false, //自动居中, 默认falsedisplay: 'double', //单页显示/双页显示 single/doubleduration: 1000, //翻页速度(毫秒), 默认600msgradients: true, //翻页时的阴影渐变, 默认trueinclination: 0,page: 1, //设置当前显示第几页//pages: 4, //总页数when: { //监听事件turning: function (e, page, view) {// 翻页前触发},turned: function (e, page) { // 翻页后触发}}
});
方法
语法
$('.flipbook').turn('方法名'[, 参数],);
//不需要turn()返回值的时候，可以连这写
$('.flipbook').turn('方法名'[, 参数],).turn('方法');
- direction
//设置图书翻页方向
$("#flipbook").turn("direction", "rtl");
- addPage
//增加一页
//两个参数 1,jquery对象（页面） 2,页号（非必填,默认是往最后一页后面加一页）
$('.flipbook').turn('addPage', $('<div/>'), 3);
- dispaly
//一个参数 single/double 单页/双页 显示
$('.flipbook').turn('display', 'double');//获取display属性值
$('.flipbook').turn('display'); //返回single or double- disable
设置页面禁用
- destroy
//移除所有页
$('.flipbook').turn('destroy');
- removePage
//移除指定页
//一个参数 页号
$('.flipbook').turn('removePage' , 2); //移除第二页
- hasPage
//指定页是否存在
//一个参数 页号
$('.flipbook').turn('hasPage' , 1); //如果该页存在，返回true
- next
//翻到下一页
$('.flipbook').turn('next');
- previous
//翻到上一页
$('.flipbook').turn('previous');
- is
//是否存在turn()实例
$('.flipbook').turn('is'); //存在返回true
- page
//翻到指定页
$('.flipbook').turn('page' , 2); //翻到第二页//返回当前显示第几页
$('.flipbook').turn('page');
- pages
//设置总页数
$('.flipbook').turn('pages' , 2);//返回总页数
$('.flipbook').turn('pages');
- peel
//展示从哪个角翻页
//一个参数 tl-左上角 bl-左下角 tr-右上角 br-右下角 l-左 r-右
$('.flipbook').turn('peel' , 'br');//不显示
$('.flipbook').turn('peel' , false);// r和l在设置class=hard时才有效果
- size
//设置大小
//两个参数 1,width 2,height
$('.flipbook').turn('size', 922 ,600);//返回纸的大小{width: xx, height:xx}
$('.flipbook').turn('size');
- stop
//停止动画效果
$('.flipbook').turn('page', 3).turn('stop'); //没有翻页动画
- zoom
//缩放
//两个参数 1,缩放倍数 2, 缩放动画持续事件（感觉没起作用啊）
$('.flipbook').turn('zoom', 0.6, 500);//返回缩放倍数，默认1
$('.flipbook').turn('zoom');
事件
两种方式添加事件
- turn()构造方法里面的 when: {}- bind()
- start
//页面上的任何一个动作开始触发
when: {start: function (event, page, pageObj) {console.log('start');}$('.flipbook').bind('start', function (event, page, pageObj) {console.log('start');
});
- end
//页面上的任何一个动作结束触发
when: {end: function (event, page, pageObj) {console.log('end');}$('.flipbook').bind('end', function (event, page, pageObj) {console.log('end');
});
- first
//当在第一页时触发
when: {first: function (event) {console.log('first page');}$('.flipbook').bind('first', function (event) {console.log('first page');
});
- last
//当在最后一页时触发
when: {last: function (event) {console.log('last page');}$('.flipbook').bind('last', function (event) {console.log('last page');
});
- turning
//翻页前触发
//event
//page $('.flipbook').turn('page')
//view $('.flipbook').turn('view');
when: {turning: function (event, page, view) {console.log('turning', page, view); //page 和 view 显示的是当前展示的页号}$('.flipbook').bind('turning', function (event, page, view) {console.log('turning', page, view);
});
- turned
//翻页后触发
//event
//page $('.flipbook').turn('page')
//view $('.flipbook').turn('view');
when: {turned: function (event, page, view) {console.log('turned');}$('.flipbook').bind('turned', function (event, page, view) {console.log('turned');
});
- zooming
//缩放触发
//event
//newFactor 缩放的倍数
//current 缩放前的倍数
when: {zooming: function (event, newFactor, current) {console.log(newFactor, current);}
$('.flipbook').bind('zooming', function (event, page, view) {console.log('zooming');
});
自动翻页loading加载功能
可以当翻书加载loading加载效果~
<script>// 自动翻页功能var way = 1;setInterval(function () {if (way == 1) {$(".flipbook").turn("next");if ($(".flipbook").turn("page") == $(".flipbook").turn("pages")) {way = 2;$(".flipbook").turn("options", {turnCorners: "tl,tr"});}} else {$(".flipbook").turn("previous");if ($(".flipbook").turn("page") == 1) {way = 1;$(".flipbook").turn("options", {turnCorners: "bl,br"});}}}, 1000);// 定义配置function loadApp() {// Create the flipbook$('.flipbook').turn({// Widthwidth: 922,// Heightheight: 600,// Elevationelevation: 50,// Enable gradientsgradients: true,// Auto center this flipbookautoCenter: true,acceleration: true, //move});$(".flipbook").turn("peel", "tr"); // 在右上角显示角}// Load the HTML4 version if there's not CSS transformyepnope({test: Modernizr.csstransforms,yep: ['./js/turn.js'],nope: ['./js/turn.html4.min.js'],both: ['./css/basic.css'],complete: loadApp});</script>
案例
项目目录如下图,源码一一对应上
CSS
basic.css源码如下
/* Basic sample */body{overflow:hidden;background-color:#fcfcfc;margin:0;padding:0;
}.flipbook-viewport{overflow:hidden;width:100%;height:100%;
}.flipbook-viewport .container{position:absolute;/* top:50%;left:50%;margin:auto; *//* margin-top: 200px;margin-left: 500px; */
}.flipbook-viewport .flipbook{width:922px;height:600px;/* left:-461px;top:-300px; */
}.flipbook-viewport .page{width:461px;height:600px;background-color:white;background-repeat:no-repeat;background-size:100% 100%;
}.flipbook .page{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);-o-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2);
}.flipbook-viewport .page img{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;margin:0;
}.flipbook-viewport .shadow{-webkit-transition: -webkit-box-shadow 0.5s;-moz-transition: -moz-box-shadow 0.5s;-o-transition: -webkit-box-shadow 0.5s;-ms-transition: -ms-box-shadow 0.5s;-webkit-box-shadow:0 0 20px #ccc;-moz-box-shadow:0 0 20px #ccc;-o-box-shadow:0 0 20px #ccc;-ms-box-shadow:0 0 20px #ccc;box-shadow:0 0 20px #ccc;
}
JS里面代码太多了,直接官网下载
下载完压缩turnjs4,打开找到extras,再打开,就可以找到需要的js文件了
index.html源码如下
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript" src="./js/jquery.min.1.7.js"></script><script type="text/javascript" src="./js/modernizr.2.5.3.min.js"></script>
</head>
<style>/* 样式加一下,防止翻页字体抖动 */.container {min-height: auto;min-width: auto;box-sizing: border-box !important;}.flipbook {-webkit-backface-visibility: hidden !important;backface-visibility: hidden !important;transform: translate3d(0, 0, 0) !important;box-sizing: border-box !important;}.page-wrapper {transform: translate3d(0, 0, 0) !important;}.flipbook {min-height: auto !important;border: 1px solid transparent !important;box-sizing: border-box;}
</style><body><div id="app"><div class="flipbook-viewport"><div class="container"><div class="flipbook"><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page1.jpg);"class="instshow">1111111111111111111111</div><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">22222222222222222</div><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">3333333333333333333333</div><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page1.jpg);">44444444444444444444444444</div><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">555555555555555555555</div><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">66666666666666666666</div><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page1.jpg);">77777777777777777777777</div><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">8888888888888888888888</div><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">999999999999999999999</div><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page1.jpg);">101010100100010100010110</div><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page2.jpg);">11111111111111111</div><div style="background-image: url(https://www.html5tricks.com/demo/css3-page-flip/page3.jpg);">12121212221212121212</div></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script><!-- 我用的引入vue文件,上面为线上引入 --><script src="./js/vue.js"></script><script>var app = new Vue({el: '#app',data: {},mounted() {yepnope({test: Modernizr.csstransforms,yep: ['./js/turn.js'],nope: ['./js/turn.html4.min.js'],both: ['./css/basic.css'],complete: this.loadApp});},methods: {loadApp() {$('.flipbook').turn({width: 922,height: 600,elevation: 50,gradients: true, // 关闭阴影，看自己需求，也可以打开autoCenter: true, // true居中acceleration: false, //move 关闭移动设备,pc端移入的时候，会有模糊字体});$('.flipbook').turn("peel", "tr"); // 在右上角显示角}},})</script>
</body>
</html>
最终效果如下
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
