资源
快速开始
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5.
先实现一个简单的:
从 Turn.js: The page flip effect in HTML5 (turnjs.com) 里下载源码和示例。
官方示例似乎考虑到了不兼容 HTML5 的情况,我们就简化点,直接使用 turn.min.js
(还应导入 JQuery,不过这个博客主题自带,就不需要引入):
<script type ="text/javascript" src ="/js/turn.min.js" > </script >
接下来创建一个电子书:
CSS HTML JS
#magazine { margin : 1em auto; }#magazine div { background-size :cover; }#magazine .turn-page { background-color :#fff ; background-size :100% 100% ; }
一个 <div></div>
代表一页。
<div id ="magazine" > <div style ="background-image:url(pages/01.jpg);" > </div > <div style ="background: #ccc;" > Hello World!</div > <div style ="background-image:url(pages/02.jpg);" > </div > <div style ="background-image:url(pages/03.jpg);" > </div > <div style ="background-image:url(pages/04.jpg);" > </div > <div style ="background-image:url(pages/05.jpg);" > </div > <div style ="background-image:url(pages/06.jpg);" > </div > <div style ="background: #ccc;" > Hello World!</div > </div >
$(document).ready(function () {
设置电子书的宽高,宽度为 95%
,高度随宽度而定,比例 752 / 1152
是根据电子书图片的宽高($576\times752$)计算得到。
$(window).ready(function () {}
设置电子书的属性:
display
: double
双页电子书。
其它默认。
$(window).bind('keydown', function (e) {}
设置按钮监听,按下键盘左键和右键时翻页。
$(document ).ready (function ( ) { var container = $('#magazine' ); container.css ('width' , '95%' ); var width = container.width (); var height = (752 / 1152 ) * width; container.css ('height' , height + 'px' ); }); $(window ).ready (function ( ) { $('#magazine' ).turn ({ display : 'double' , acceleration : true , gradients : !$.isTouch, elevation : 50 , when : { turned : function (e, page ) { } } }); }); $(window ).bind ('keydown' , function (e ) { if (e.keyCode == 37 ) $('#magazine' ).turn ('previous' ); else if (e.keyCode == 39 ) $('#magazine' ).turn ('next' ); });
最终效果:
Hello World!
Hello World!