มาทำ e-book ง่ายๆกัน โดยใช้ HTML5+Turn.js

มาเริ่มทำกันเลย เริ่มแรกโหลดไฟล์ Demo จาก https://github.com/blasten/turn.js


มารู้จักคำสั่งของ Turn.js ครับ

Constructor

$('selector').turn([options]);

Parameters:

• options
• width type: number, default: $('selector').width()
• height type: number, default: $('selector').height()
• page type: number, default: 1
• shadows type: boolean, default: true
• duration type: number, default: 600
• acceleration type: boolean, default: true

Calling Methods or Properties

$('selector').turn(property | method [, parameters]);

คำสั่งตามตัวอย่างคือ 

$(window).ready(function() {
  $('#magazine').turn({
       display: 'double',
       acceleration: true,
       gradients: !$.isTouch,
       elevation:50,
       when: {
        turned: function(e, page) {
         console.log('Current view: ', $(this).turn('view'));
        }
       }
      });
 });
 
 
 $(window).bind('keydown', function(e){
  
  if (e.keyCode==37)
   $('#magazine').turn('previous');
  else if (e.keyCode==39)
   $('#magazine').turn('next');
   
 });