翻页插件turn.js

老实说翻页turn.js里面的坑非常多，记得那时候项目中踩了几天都踩不完。个人建议谨慎使用

下面就介绍一下最简单的入门吧~

1.引入文件部分（注意必须要引入jQ，turn.js文件可以上网找，modernizr也是turn.js的一部分）：

<link rel="stylesheet" type="text/css" href="css/basic.css"/>

<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>

<script type="text/javascript" src="js/turn.js"></script>

2. 注意： 必须设置背景颜色或者背景图片，否则透明会看到其他的page

html部分:

			<div class="flipbook">
				<div class="page">1 1 </div>
				<div class="page"> 2 2 </div>
				<div class="page"> 3 3 </div>
				<div class="page"> 4 4 </div>
			</div>

3.配置turn.js

function loadLook(){
	var innerWidth = $(window).width();
	var innerHeight = $(window).height();
    function loadApp() {
      $('.flipbook').turn({
          width:innerWidth,//宽度
          height:innerHeight,//高度
          display:"single",//设置显示模式。值：单，双
          elevation: 50,
          pages:4,//页数
          page:1,//初始页面
          gradients: true,
          autoCenter: true,
	 //when 设置事件监听
          /*when:{
            turning: function(e, page, view){
              var book = $(this),
              currentPage = book.turn('page'),
              pages = book.turn('pages');
            }
          }*/
      });
    }
    // Load the HTML4 version if there's not CSS transform
    yepnope({
      test : Modernizr.csstransforms,
      yep: ['js/turn.js'],
      both: ['css/basic.css'],
      complete: loadApp
    });
  }

loadLook();

 //下一页按钮
  $("#help").on("click",function(event) {
    $(".flipbook").turn("next");
  });
  //上一页按钮
  $("#help").on("click",function(event) {
    $(".flipbook").turn("previous");
  });