之前接觸過(guò)一個(gè)h5的項(xiàng)目 就是用的turn.js 您可以看看有沒(méi)有幫助

http://h5.trando9.cn/101/

翻書(shū)實(shí)現(xiàn)：

  turnPage: function () {
        var _this = this;
        $('#magazine').turn({
            display: 'double',
            acceleration: true, //設(shè)置硬件加速模式，對(duì)于觸摸設(shè)備這個(gè)值必須是真的
            gradients: true,  //在轉(zhuǎn)換過(guò)程中顯示漸變和陰影。
            elevation: 50, //設(shè)置過(guò)渡期間頁(yè)面的高程
            when: {
                turning: function(event, page, pageObject) {
                    _this._page = page
                    // console.log(page)
                    if(page > 3 && page < 19){
                        // console.log(_this.setIner)
                        clearInterval(_this.setIner)
                        _this.musicFunc(page);
                        TweenMax.set(_this.pageArr[page], {y:0})
                        TweenMax.pauseAll()

                        $('.fram-box').on(_this.touchstart, function () {
                            _this.bg.play();
                            $('.svg').fadeOut();
                            // 音樂(lè)播放開(kāi)始
                            if(_this.addAudio) {
                                _this.addAudio = false;
                                _this.bg.addEventListener('play', function () {
                                    _this.animateTuex();
                                    _this.pageMove(_this._page);
                                    // _this.pageMove(_this._page)
                                    // _this.movepage.restart()
                                })
                            }
                        })
                    }else if(page == 3 ){
                        _this.bg.src = '';
                        _this.bg.pause();

                        $('.svg').fadeOut(1000)
                    }else if(page == 2){
                        $('.movelr').fadeOut(1000)
                    }else if(page == 1){
                        $('.movelr').fadeIn(1000)
                    }
                },
                turned: function(e, page) {
                    if(page > 3){
                        $('.svg').fadeIn();
                    }
                }
            }
        });

    },

倉(cāng)庫(kù)地址 https://github.com/blasten/tu...
官方地址：http://www.turnjs.com/