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

      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>

属性使用：

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

 turned: function(){}
}

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

// Turn to the page 10

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

秒客网

Turn.js 实现翻书效果

相关文章