H5W3
当前位置:H5W3 > HTML5 > 正文

【前端】移动端swiper怎样实现翻书效果的

用anuglar H5写的移动端项目 需要实现翻书和一些动画的效果 之前没做过 不知道哪个更适合在移动端做这种效果的 好像swiper可以 但是我在官网上都没找到做这种翻书效果的教程或者API
有一个叫turn.js的 不知道是不是适合做这种移动端左右滑动翻书效果

回答

之前接触过一个h5的项目 就是用的turn.js 您可以看看有没有帮助

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

翻书实现:

  turnPage: function () {
        var _this = this;
        $('#magazine').turn({
            display: 'double',
            acceleration: true, //设置硬件加速模式,对于触摸设备这个值必须是真的
            gradients: true,  //在转换过程中显示渐变和阴影。
            elevation: 50, //设置过渡期间页面的高程
            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();
                            // 音乐播放开始
                            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();
                    }
                }
            }
        });

    },

仓库地址 https://github.com/blasten/tu…
官方地址:http://www.turnjs.com/

本文地址:H5W3 » 【前端】移动端swiper怎样实现翻书效果的

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址