H5FullscreenPage.js

(function(){
         var opt = {
            'type' : 1,
            'pageShow' : function(){},
            'pageHide' : function(){},
            'useShakeDevice' : {
                'speed' : 30,
                'callback' : function(){}
            },
            'useParallax' : true,
            'useArrow' : true,
            'useAnimation' : true,
            'useMusic' : {
                'autoPlay' : true,
                'loopPlay' : true,
                'src' : 'http://mat1.gtimg.com/news/2015/love/FadeAway.mp3'
            }
         };
         window.H5FullscreenPage = {
            'init' : function(option){
                $.extend(opt,option);
                initDom(opt);
                initEvent(opt);
            }
         };
         
         var obj = {
             '1' : {
                 'upDrag' : function(percentage, item){
                     var translateY = 1 - 0.7*percentage;//位置系数，可以微调
                     item.next().css('-webkit-transform', 'translate3d(0,'+translateY*100+'%,0)'); //下一个item上移动
                 },
                 'downDrag' : function(percentage, item){
                     var translateY = -(0.7*percentage);
                     item.prev().css('-webkit-transform', 'translate3d(0,'+(translateY*100 - 100)+'%,0)');
                     item.css('-webkit-transform', 'translate3d(0,'+translateY*100+'%,0)');//当前item下移动
                 },
                 'nextSlide' : function(item){
                     item.css('-webkit-transform', 'translate3d(0,-100%,0)'); 
                     item.next().css('-webkit-transform', 'translate3d(0,0,0)');
                 },
                 'prevSlide' : function(item){
                     item.prev().css('-webkit-transform', 'scale(1)'); 
                     item.css('-webkit-transform', 'translate3d(0,100%,0)'); 
                 },
                 'showSlide' : function(item){
                     item.css('-webkit-transform', 'scale(1)'); 
                     item.next().css('-webkit-transform', 'translate3d(0,100%,0)'); 
                 }
             },
             '2' : {
                 'upDrag' : function(percentage, item){
                     var scale = 1 - 0.2*percentage;//缩放系数，可以微调
                     var translateY = 1 - 0.7*percentage;//位置系数，可以微调
                     item.css('-webkit-transform', 'scale('+scale+')');//当前item缩小
                     item.next().css('-webkit-transform', 'translate3d(0,'+translateY*100+'%,0)'); //下一个item上移动
                 },
                 'downDrag' : function(percentage, item){
                     var scale = 0.8 - 0.2*percentage;
                     var translateY = -(0.7*percentage);
                     item.css('-webkit-transform', 'translate3d(0,'+translateY*100+'%,0)');//当前item下移动
                     item.prev().css('-webkit-transform', 'scale('+scale+')');//前一个item放大
                 },
                 'nextSlide' : function(item){
                     item.css('-webkit-transform', 'scale(.8)'); 
                     item.next().css('-webkit-transform', 'translate3d(0,0,0)');
                 },
                 'prevSlide' : function(item){
                     item.prev().css('-webkit-transform', 'scale(1)'); 
                     item.css('-webkit-transform', 'translate3d(0,100%,0)'); 
                 },
                 'showSlide' : function(item){
                     item.css('-webkit-transform', 'scale(1)'); 
                     item.next().css('-webkit-transform', 'translate3d(0,100%,0)'); 
                 }
             },
             '3' : {
                 'upDrag' : function(percentage, item){
                     var translateY = 1 - 0.4*percentage;//位置系数，可以微调
                     item.css('-webkit-transform', 'translate3d(0,'+(translateY*100 - 100)+'%,0)');
                     item.next().css('-webkit-transform', 'translate3d(0,'+translateY*100+'%,0)'); //下一个item上移动
                 },
                 'downDrag' : function(percentage, item){
                     var translateY = -(0.4*percentage);
                     item.prev().css('-webkit-transform', 'translate3d(0,'+(translateY*100 - 100)+'%,0)');
                     item.css('-webkit-transform', 'translate3d(0,'+translateY*100+'%,0)');//当前item下移动
                 },
                 'nextSlide' : function(item){
                     item.css('-webkit-transform', 'translate3d(0,-100%,0)'); 
                     item.next().css('-webkit-transform', 'translate3d(0,0,0)');
                 },
                 'prevSlide' : function(item){
                     item.prev().css('-webkit-transform', 'scale(1)'); 
                     item.css('-webkit-transform', 'translate3d(0,100%,0)'); 
                 },
                 'showSlide' : function(item){
                     item.css('-webkit-transform', 'scale(1)'); 
                     item.next().css('-webkit-transform', 'translate3d(0,100%,0)'); 
                 }
             },
             '4' : {
                 'upDrag' : function(percentage, item){
                     var translateY = 1 - 0.4*percentage;//位置系数，可以微调
                     item.css('-webkit-transform', 'translate3d(0,'+(translateY*100 - 100)+'%,0)');
                     item.next().css('-webkit-transform', 'translate3d(0,'+translateY*100+'%,0)'); //下一个item上移动
                 },
                 'downDrag' : function(percentage, item){
                     var translateY = -(0.4*percentage);
                     item.prev().css('-webkit-transform', 'translate3d(0,'+(translateY*100 - 100)+'%,0)');
                     item.css('-webkit-transform', 'translate3d(0,'+translateY*100+'%,0)');//当前item下移动
                 },
                 'nextSlide' : function(item){
                     item.addClass('zindex');
                     setTimeout(function(){
                         item.removeClass('no-animation').css('-webkit-transform', 'translate3d(0,-100%,0)');
                         item.next().removeClass('zindex').addClass('no-animation').css('-webkit-transform', 'translate3d(0,0,0)');
                     },100);
                     
                 },
                 'prevSlide' : function(item){
                     
                     item.prev().css('-webkit-transform', 'translate3d(0,0,0)'); 
                     item.next().css('-webkit-transform', 'translate3d(0,100%,0)'); 
                     item.removeClass('zindex');
                 },
                 'showSlide' : function(item){
                     item.css('-webkit-transform', 'scale(1)'); 
                     item.next().css('-webkit-transform', 'translate3d(0,100%,0)'); 
                 }
             }
         };
         var dragThreshold = 0.15; //临界值
         var dragStart = null;//开始抓取标志位
         var percentage = 0;//拖动量的百分比
         var currentItem;
          
         function touchStart(event) {
            if (dragStart !== null) return;
            var item = $(event.target).closest('.item');
             if (!item.length) {
                 $('.overlay').hide();
                 return;
             }
            if (event.touches) {
                event = event.touches[0];
            }
             //抓取时的所在位置
            dragStart = event.clientY;
            
             //分别关闭item的动画效果,动画效果只在松开抓取时出现
            item.addClass('no-animation');
            item.next().addClass('no-animation');
            item.prev().addClass('no-animation');

         }
          
         function touchMove (event) {
             //console.log(33);
            //防止ios拖动事件
            event.preventDefault();
            
            if (dragStart === null) return;
            var item = $(event.target).closest('.item');
             if (!item.length) {
                 $('.overlay').hide();
                 return;
             }
            if (event.touches) {
                event = event.touches[0];
            }
             //得到抓取开始时于进行中的差值的百分比
            percentage = (dragStart - event.clientY) / window.screen.height;//
             
            if (percentage > 0) {
                // //向上拖动
                var scale = 1 - 0.5*percentage;//缩放系数，可以微调
                // var translateY = 1 - 0.4*percentage;//位置系数，可以微调
                // $(event.target).css('-webkit-transform', 'scale('+scale+')');//当前item缩小
                // $(event.target).next().css('-webkit-transform', 'translateY('+translateY*100+'%)'); //下一个item上移动
                 //$(event.target).css('opacity', ''+scale+'');//当前item缩小
                 obj[opt.type].upDrag(percentage, item);
                 
            } else if (item.prev()) {
                //向下拖动
                // var scale = 0.8 - 0.2*percentage;
                // var translateY = -(0.4*percentage);
                // $(event.target).css('-webkit-transform', 'translateY('+translateY*100+'%)');//当前item下移动
                // $(event.target).prev().css('-webkit-transform', 'scale('+scale+')');//前一个item放大
                 obj[opt.type].downDrag(percentage, item);
            }
            
         }
          
         function touchEnd (event) {
            //防止多次滚动，故增加一个覆盖层
            $('.overlay').show();
            dragStart = null;
            var item = $(event.target).closest('.item');
             if (!item.length) {
                 $('.overlay').hide();
                 return;
             }
            item.removeClass('no-animation');
            item.next().removeClass('no-animation');
            item.prev().removeClass('no-animation');
            
            //抓取停止后，根据临界值做相应判断
            if (percentage >= dragThreshold) {
                nextSlide(item);
            } else if ( Math.abs(percentage) >= dragThreshold ) {
                prevSlide(item);
            } else {
                showSlide(item);
            }
             //重置percentage
            percentage = 0;

         }
         function swipeUp(event){
            var item = $(event.target).closest('.item');
            if (!item.length) {
                return;
            }
             nextSlide(item);
             //$(event.target).css('-webkit-transform', 'translateY(-101%)'); 
             //$(event.target).next().css('-webkit-transform', 'translateY(0)'); 
         }
         function swipeDown(event){
            var item = $(event.target).closest('.item');
            if (!item.length) {
                return;
            }
             prevSlide(item);
             //$(event.target).css('-webkit-transform', 'translateY(101%)'); 
             //$(event.target).prev().css('-webkit-transform', 'translateY(0)'); 
         }
         function nextSlide(item){
            //$(event.target).removeClass('parallax-item');
            //恢复到原样，或者展示下一item
            if (item.next().length) { 
                item.attr('state','prev');
                item.siblings('.item').removeAttr('state');
                
                currentItem = item.next();
                currentItem.attr('state','next');

                orderPart(item.next());
                obj[opt.type].nextSlide(item);
            } else {
                obj[opt.type].showSlide(item);
            }
            
         }
         function prevSlide(item){
            //$(event.target).removeClass('parallax-item');
            if (item.prev().length) {

                item.attr('state','prev');
                item.siblings('.item').removeAttr('state');
                currentItem = item.prev();
                currentItem.attr('state','next');
                obj[opt.type].prevSlide(item);
            } else {
                obj[opt.type].showSlide(item);
            }
            
         }
         function showSlide(item){
            //$(event.target).removeClass('parallax-item');
             obj[opt.type].showSlide(item);
         }
         function initDom(opt){
            $('body').addClass('H5FullscreenPage');
            currentItem = $('.item').first();
            currentItem.attr('state','next');
            if (opt.useAnimation) {
                var items = $('.item');
                items.find('.part').addClass('hide');
                orderPart(items.first());
            }
            $('body').append('<div class="overlay"></div>');
            if (opt.useArrow) {
                $('.item').slice(0,$('.item').length-1).append('<span class="arrow"></span>');
            }
            if (opt.useMusic) {
                var autoplay = opt.useMusic.autoPlay ? 'autoplay="autoplay"' : '';
                var loopPlay = opt.useMusic.loopPlay ? 'loop="loop"' : '';
                var src = opt.useMusic.src;
                $('body').append('<span class="music play"><audio id="audio" src='+src+' '+autoplay+' '+loopPlay+'></audio></span>');
            }
         }
         function orderPart(dom){
            var parts = $(dom).find('.part');
            parts.forEach(function(item){
                var time = $(item).attr('data-delay') || 100;
                setTimeout(function(){
                    $(item).removeClass('hide');
                },time);
            });
         }
         function initEvent(opt){
            if (opt.useParallax) {

                var orginData = {x:0,y:0};
                window.addEventListener('deviceorientation',function(event){
                    var gamma = event.gamma;
                    var beta = event.beta;

                    var x = -gamma;
                    var y = -beta;
                    
                    if (Math.abs(Math.abs(x) - Math.abs(orginData.x)) < 0.1 || Math.abs(Math.abs(y) - Math.abs(orginData.y)) < 0.1) {
                        orginData.x = x;
                        orginData.y = y;
                        return;
                    } else {
                        orginData.x = x;
                        orginData.y = y;
                    }
                    
                    var halfWidth = window.innerWidth / 2;  
                    var halfHeight = window.innerHeight / 2;  
                 
                    
                    var max = 5;
                    var items = $('.parallax');
                    items.forEach(function(item){
                        var dx = (item.getBoundingClientRect().width/max)*(x / halfWidth);
                        var dy = (item.getBoundingClientRect().width/max)*(y / halfHeight);
                        
                        if ($(item).hasClass('item')) {
                            //$(item).addClass('parallax-item');
                            dx = -dx/1 + 50;
                            dy = -dy/1 + 50;
                            item.style['background-position'] = ''+dx+'% '+dy+'%';
                            //$(item).removeClass('parallax-item');
                        } else {
                            item.style['transform'] = item.style['-webkit-transform'] = 'translate3d('+dx+'px,'+dy+'px,0)'; 
                        }
                        
                        
                    });
                     
                   
                }, false);
            }
            if (opt.useShakeDevice && opt.useShakeDevice.speed) {
                var x = y = z = lastX = lastY = lastZ = 0;
                if (window.DeviceMotionEvent) {
                        window.addEventListener('devicemotion',function(eventData){
                            var acceleration =event.accelerationIncludingGravity;
                                        x = acceleration.x;
                                        y = acceleration.y;
                                        z = acceleration.z;
                                        if(Math.abs(x-lastX) > opt.useShakeDevicespeed || Math.abs(y-lastY) > opt.useShakeDevicespeed || Math.abs(z-lastZ) > opt.useShakeDevicespeed) {
                                            //shake
                                            opt.useShakeDevice.callback && opt.useShakeDevice.callback(currentItem);
                                            
                                        }
                                        lastX = x;
                                        lastY = y;
                                        lastZ = z;
                        }, false);  
                    }
            }
            $('.music').on('tap',function(){
                $(this).toggleClass('play');
                var audio = document.getElementById('audio');
                if (audio.paused) {
                    audio.play();
                } else {
                    audio.pause();
                }
            });
            // 绑定事件
            $(document).on('touchmove', function(e){
                e.preventDefault();
            });
            if (opt.type > 4) {
                opt.type = opt.type - 4;
                $('.item').on({
                    'swipeUp': swipeUp,
                    'swipeDown': swipeDown
                });
            } else {
                $('.item').on({
                   'touchstart': touchStart,
                   'touchmove': touchMove,
                   'touchend': touchEnd,
                   'touchcancel': touchEnd
                });
            }
            
            $('.item').on('tap', function(){
                //覆盖层隐藏
                $('.overlay').hide();
            });
            $('.item').on('transitionend webkitTransitionEnd', function(event){
               //覆盖层隐藏
               $('.overlay').hide();
               //console.log($(event.target).attr('state'));
               if ($(event.target).attr('state') == 'next') {
                    opt.pageShow(event.target);
               } else {
                    opt.pageHide(event.target);
               }
               // opt.pageComplete(event.target);
               // debugger;
            });
            $('.overlay').on('tap', function(){
                //覆盖层隐藏
                $('.overlay').hide();
            });
         }
         
    })();