适配移动端和PC端的翻书效果

首先，实现翻书效果我使用了turnjs，是一款非常好用的翻书效果插件。可以直接在百度搜索turnjis下载。也可已选择在我的github库下载。

其次，PC端和移动端屏幕的差异使得我们需要控制在PC端显示两页，在移动端显示一页，然后宽度和高度用js做适应即可。

turnjs使用头部需要引入的文件。然后固定格式的代码

 <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery.min.1.7.js"></script>
    <link rel="stylesheet" href="js/turnjs/css/basic.css">

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

然后，js初始化就ok了。初始化的时候判断当前是否为移动端，然后执行不同的初始化。

<script type="text/javascript" src="js/turnjs/extras/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="js/turnjs/lib/turn.min.js"></script>
<script>
    $(function(){
        //可以设置上一页  及 下一页 跳转指定页
        // Turn to the page 10
        //$("#flipbook").turn("page", 10);
        //$("#flipbook").turn("next");
        //$("#flipbook").turn("prev");
        function loadApp() {
            var w = $(window).width() - 40;
            var h = $(window).height() - 160;
            //判断是否是移动端
            if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                //书本初始化
                $('.flipbook').turn({
                    width:w,
                    height:h,//书本的大小
                    direction:"ltr",//书本翻动方向
                    elevation: 50, //在转换期间设置页面的标高。
                    display:"single",//display("double"  "single")  展示一页或者两页，默认double
                    duration:1000,// 设置翻页动画持续时间即翻页的快慢，默认600(毫秒)
                    gradients: true,//翻页阴影
                    acceleration:true,// 硬件加速，对于触摸设备，一定要设置true
                    autoCenter:false //是否居中 默认false
                });
            } else {
                //书本初始化
                $('.flipbook').turn({
                    width:w,
                    height:h,
                    direction:"ltr",
                    elevation: 50,
                    display:"double",
                    duration:1000,
                    gradients: true
                });
                var $pages = $(".page");
                if($pages.length>0){
                    for(var i=0;i<$pages.length;i++){
                        $pages.eq(i).css("width",w/2);
                    }
                }
            }
        }
        yepnope({
            test : Modernizr.csstransforms,
            // nope: ['js/turnjs/lib/turn.html4.min.js'],
            complete: loadApp
        });
    })
</script>