Turn.js 实现翻书效果

官网上运行demo如下，大家主要关注是属性使用：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="jquery.min.1.7.js"></script>
  <script type="text/javascript" src="modernizr.2.5.3.min.js"></script>
</head>
<body>

<div class="flipbook-viewport">
  <div class="container">
    <div class="flipbook">
      <div>1111111111111</div>
      <div>2222222222222</div>
      <div>3333333333333</div>
      <div>4444444444444</div>
      <div>5555555555555</div>
      <div>6666666666666</div>
      <div>7777777777777</div>
      <div>8888888888888</div>
      <div>9999999777999</div>
    </div>
  </div>
</div>

<script type="text/javascript">

  function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({
      // Width

       922,

      // Height

      height: 600,

      // Elevation
      elevation: 50,

      // Enable gradients

      gradients: true,

      // Auto center this flipbook

      autoCenter: true

    });
  }

  // Load the HTML4 version if there's not CSS transform

  yepnope({
    test: Modernizr.csstransforms,
    yep: ['turn.js'],
    both: ['basic.css'],
    complete: loadApp
  });

</script>

</body>
</html>

View Code

属性使用：

display: 'single'    显示单页  默认是双页
when: function(){  // 事件监听 
 turning: function(event, page, view){
   alert(page)
 },

 turned: function(){}
}

可以设置上一页  及 下一页 跳转指定页

// Turn to the page 10
$("#flipbook").turn("page", 10);