js

专题地址：

http://product.kimiss.com/topic/Lancome_GrandioseH5.html

  

js：

http://wwwcdn.kimiss.net/public/topic/lancome/js/grandiose_h5.js

借鉴之处：

1. 图片全部加载完，再进入专题

2. 变量封装

var APP = {
    init: function(args) {
        this.dTips = $('.tips');
        this.dWapper = $('.bob_main');
        this.dSubPages = $('.m-page');

        this.page = 1;

        this.video = document.getElementById("index_video");
        this.showForm = args.showForm;// 直接显示申请框

        this._bind();
        this._check_screen_size();

        this._PreLoadImg([
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/a1_1.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/a1_2.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/a2_1.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/a2_2.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/a3_2.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/a4_2.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/a5_1.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/a5_2.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p1_1.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p1_2.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p1_3.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p1_play.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p1_skip.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/v_logo.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_down.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c1_1.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c1_2.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c1_3.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c1_4.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c1_5.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c2_1.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c2_2.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c2_3.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c3_1.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c3_2.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_apply_btn.png',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p1_bg.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c1_bg.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c2_bg.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/p2_c3_bg.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/form_bg.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/suc_bg.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/apply_flow_bg.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/tip-img.jpg',
            'http://wwwcdn.kimiss.net/public/topic//lancome/img/grandiose_h5/close.png'
        ], function() {
            $('#spinnerLoad').html('100%');
            $('img').each(function() {
                var _src = $(this).attr('data-src');
                if (_src) {
                    $(this).attr('src', _src);
                }
            });
            $('.loading').remove();
            if(APP.showForm) {
                $('.animation').hide();
                APP.dWapper.show();
                $('#apppart1').hide();
                $('#apppart2').show();
                $('.apply_btn').click();
            } else {
                APP._show_animation();
            }            
        });
    },
    _PreLoadImg: function(b, e) {
        var c = 0, a = {}, d = b.length;
        for (src in b) {
            a[src] = new Image();
            a[src].onload = function() {
                ++c;
                $('#spinnerLoad').html(parseInt(c * 100 / d, 10) + '%');
                if (c >= d) {
                    e(a);
                }
            };
            a[src].src = b[src];
        }
    },
    _show_animation: function() {
        $('.animation').show();

        this.animate_page = 0;
        this._show_animation_page();
    },
    _show_animation_page: function() {
        $('.a' + this.animate_page).fadeOut();
        this.animate_page += 1;
        $('.a' + this.animate_page).fadeIn();
        if (this.animate_page == 6) {
            $('.animation').hide();
            APP.dWapper.show();
            $('#apppart1').show();
        } else {
            if (this.animate_page == 5) {
                $('.a5_2').css({
                    'left': '-200px'
                });
                $('.a5_3').css({
                    'bottom': '-400px',
                });
                $('.a5_4').css({
                    'bottom': '-320px',
                    'left': '-320px'
                });
                var is = $('.a5 i');
                is.css({'opacity': 0});
                setTimeout(function() {
                    $('.a5_2').animate({
                        'left': 0
                    });
                }, 200);
                setTimeout(function() {
                    $('.a5_3').animate({
                        'bottom': 0
                    });
                }, 600);
                setTimeout(function() {
                    $('.a5_4').animate({
                        'bottom': 0,
                        'left': 0
                    });
                }, 1000);
                setTimeout(function() {
                    is.eq(0).animate({
                        'opacity': 1
                    });
                }, 1200);
                setTimeout(function() {
                    is.eq(1).animate({
                        'opacity': 1
                    });
                }, 1400);
                setTimeout(function() {
                    is.eq(2).animate({
                        'opacity': 1
                    });
                }, 1600);
                setTimeout(function() {
                    is.eq(3).animate({
                        'opacity': 1
                    });
                }, 1800);
                setTimeout(function() {
                    is.eq(4).animate({
                        'opacity': 1
                    });
                }, 2000);
                setTimeout(function() {
                    is.eq(5).animate({
                        'opacity': 1
                    });
                }, 2200);
                setTimeout(function() {
                    APP._show_animation_page();
                }, 3000);
            } else {
                setTimeout(function() {
                    APP._show_animation_page();
                }, 1000);
            }
        }
    },
    _bind: function() {
        var self = this;

        $(window).resize(function() {
            self._check_screen_size();
        });

        $(window).on('orientationchange', function(event) {
            self.dTips.hide();
            self.dWapper.hide();
            self._check_screen_size();
            if (window.orientation == 0) {
                self.dWapper.show();
            } else {
                self.dTips.show();
            }
        });

        //点击首页视频播放
        $("#show_video_full").click(function() {
            $(".index_video").show();
            self.video.play();
        });

        this.video.addEventListener("ended", function() {
            APP._show_content();
            $.cookie('Application', 1, {expires: 7});
        }, false);

        //关闭首页视频层
        $(".i_close").on('mousedown touchstart', function(e) {
            $(".index_video").fadeOut();
            self.video.pause();
        });

        //首页跳过切换
        $(".skip").click(function() {
            $(".p1_2").addClass("fadeOutUp");
            $(".p1_3").addClass("fadeOutDown");
            $(".p1_play").addClass("fadeOut");
            $(".skip").addClass("fadeOut");
            setTimeout(function() {
                $(".p1_1").addClass("fadeOutDown");
            }, 1100);
            setTimeout(function() {
                APP._show_content();
            }, 2000);
        });

       

        $('.c_flow_ok').click(function() {
            $('#c_apply_flow').fadeOut();
        });

       
        //省市联动
        $('#province_select').live('change', function() {
            if ($('#province_select').val()) {
                var hideid = 'city_' + $(this).val();
                var ncity = $('#' + hideid).html();
                $('#city_select').html(ncity);
            }

        });

        var tempVar = "您已提交过申请，通过后会第一时间通知您~~"
        $('.submit_btn').live('click', function() {

            if (!isApply) {
                var tryId = $('#tryId').val();//试用ID
                var productids = $('#productids').val();
                var pubnametime = $('#pubnametime').val();
                var name = $.trim($('#name').val());
                var province = $('#province_select').val();
                var city = $('#city_select').val();
                var address = $('#address').val();
                var phone = $.trim($('#phone').val());
                var sex = $('option[name=sex]:checked').val();
                var age = $('#Ymd').val();
                var fuzhi = $.trim($('#fuzhi_select').val());
                var xiaofei = $.trim($('#xiaofei_select').val());
                var content = '兰蔻“天鹅颈”睫毛膏 我想要~!'; //申请感言

                //验证出生日期是否正确
                var YmdStr = age.split('-');
                var _subY = $.trim(YmdStr[0]);
                var _subM = $.trim(YmdStr[1]);
                var _subD = $.trim(YmdStr[2]);
                //获取当下年份
                var mydate = new Date();
                var _nowYear = mydate.getFullYear(); //获取完整的年份(4位)

                if (name === '*请输入姓名' || !name) {
                    alert('姓名不能为空！');
                    return false;
                }
                if (!sex || sex === '*选择性别') {
                    alert('请选择性别！');
                    return false;
                }
                if (!_subY || _subY < 1960 || _subY > _nowYear || !_subM || !_subD) {
                    alert('请填写正确的生日');
                    return false;
                }
                if (phone === '*请输入电话' || !phone) {
                    alert('手机号不能为空！');
                    return false;
                } else {
                    reg = /^1([0-9]{10})?$/;
                    if (!reg.test(phone)) {
                        alert('请输入正确的手机号!');
                        return false;
                    }
                }
                if (!province || province === '*选择省份') {
                    alert('省份不能为空！');
                    return false;
                } else {
                    if (!city || city === '*选择城市' || city === '*选择市区') {
                        alert('城市不能为空！');
                        return false;
                    }
                }
                if (!address || address === '*请输入详细地址') {
                    alert('详细地址不能为空！');
                    return false;
                }
                isApply = 1;
            } else {
                alert(tempVar);
                return false;
            }

            //ls
            //        $("#c_form_submit").slideUp();
            //        $('#c_form_tips').show();
            //        return false;
            //ls

            $.post("/index.php?c=Newtry_Detail&a=Post", {
                tryId: tryId,
                productids: productids,
                pubnametime: pubnametime,
                name: name,
                province: province,
                city: city,
                address: address,
                phone: phone,
                sex: sex,
                age: age,
                fuzhi: fuzhi,
                xiaofei: xiaofei,
                content: content,
            }, function(result) {
                if (result == 2) {
                    alert('您已提交过申请，通过后会第一时间通知您~~');
                    return false;
                } else if (result == 3) {
                    alert('请完整填写地址信息');
                    return false;
                } else {
                    $("#c_form_submit").slideUp();
                    $('#c_form_tips').show();
                    return false;
                }
            });

        });


        //点击提交申请成功提示确定按钮
        $(".c_tips_sure").click(function() {
            $("#c_form_tips").slideUp();
            self.page = 1;
            APP._show_content();
        });


        var initP = null
                , moveP = null
                , mousedown = null;
        this.dSubPages.on('mousedown touchstart', function(e) {
            if (self.moving) {
                return;
            }
            if (e.type == "touchstart") {
                initP = window.event.touches[0].pageY;
            } else {
                initP = e.y || e.pageY;
                mousedown = true;
            }

            self.dSubPages.on('mousemove touchmove', function(e) {
                e.preventDefault();
                e.stopPropagation();
                if (initP && !self.moving) {
                    if (e.type == "touchmove") {
                        moveP = window.event.touches[0].pageY;
                    } else {
                        if (mousedown)
                            moveP = e.y || e.pageY;
                    }
                }
            });
            self.dSubPages.on('mouseup touchend mouseout', function() {
                if (moveP && Math.abs(moveP - initP) > 20) {
                    if (moveP > initP) {
                        if (self.page != 1) {
                            self.moving = true;
                            initP = null;
                            moveP = null;
                            self._show_page(self.page - 1);
                        }
                    } else {
                        if (self.page != 3) {
                            self.moving = true;
                            initP = null;
                            moveP = null;
                            self._show_page(self.page + 1);
                        }
                    }
                }

                if (!self.moving) {
                    initP = null;
                    moveP = null;
                }

                self.dSubPages.off('mousemove touchmove');
                self.dSubPages.off('mouseup touchend mouseout');
            });
        });
    },
    _show_content: function() {
        $('#apppart1').hide();
        $('#apppart2').fadeIn();
        $('.page2').css('top', 0).show();
        this.dSubPages.show();
        this._show_page(1);
    },
    _show_page: function(page) {
        this.page = page;
        switch (APP.page) {
            case 1:
                $('.p2_c1_1').addClass('hide').removeClass('fadeInUp');
                $('.p2_c1_2').addClass('hide').removeClass('fadeInDown');
                $('.p2_c1_3').addClass('hide').removeClass('fadeInDown');
                $('.p2_c1_4').addClass('hide').removeClass('fadeIn');
                $('.p2_c1_5').addClass('hide').removeClass('fadeIn');
                $('.p2_c1_apply_btn').addClass('hide').removeClass('fadeIn');
                break;
            case 2:
                $('.p2_c2_1').addClass('hide').removeClass('fadeInUp');
                $('.p2_c2_2').addClass('hide').removeClass('fadeInDown');
                $('.p2_c2_3').addClass('hide').removeClass('fadeIn');
                $('.p2_c2_apply_btn').addClass('hide').removeClass('fadeIn');
                break;
            case 3:
                $('.p2_c3_1').addClass('hide').removeClass('fadeInUp');
                $('.p2_c3_2').addClass('hide').removeClass('fadeIn');
                $('.p2_c3_3').addClass('hide').removeClass('fadeInDown');
                $('.p2_c3_apply_btn').addClass('hide').removeClass('fadeIn');
                break;
        }
        $('.apply_btn').removeClass('animated pulse infinite');
        $('.page2').animate({'top': -APP.sc_h * (page - 1) + 'px'}, function() {
            APP.moving = false;
            switch (APP.page) {
                case 1:
                    $('.p2_c1_1').removeClass('hide').addClass('fadeInUp');
                    $('.p2_c1_2').removeClass('hide').addClass('fadeInDown');
                    $('.p2_c1_3').removeClass('hide').addClass('fadeInDown');
                    $('.p2_c1_4').removeClass('hide').addClass('fadeIn');
                    $('.p2_c1_5').removeClass('hide').addClass('fadeIn');
                    $('.p2_c1_apply_btn').removeClass('hide').addClass('fadeIn');
                    break;
                case 2:
                    $('.p2_c2_1').removeClass('hide').addClass('fadeInUp');
                    $('.p2_c2_2').removeClass('hide').addClass('fadeInDown');
                    $('.p2_c2_3').removeClass('hide').addClass('fadeIn');
                    $('.p2_c2_apply_btn').removeClass('hide').addClass('fadeIn');
                    break;
                case 3:
                    $('.p2_c3_1').removeClass('hide').addClass('fadeInUp');
                    $('.p2_c3_2').removeClass('hide').addClass('fadeIn');
                    $('.p2_c3_3').removeClass('hide').addClass('fadeInDown');
                    $('.p2_c3_apply_btn').removeClass('hide').addClass('fadeIn');
                    break;
            }
            setTimeout(function() {
                $('.apply_btn').addClass('animated pulse infinite');
            }, 2000);
            APP._animate_down();
        });
    },
    _animate_down: function() {
        clearTimeout(APP.timer);
        clearTimeout(APP.fn_timer);
        if (this.page == 3) {
            return;
        }
        APP.timer = setTimeout(function() {
            APP._animate_down_fn();
        }, 2600);
        $('.p2_down').stop().css({'opacity': 0});
    },
    _animate_down_fn: function() {
        var _bot = 20 - APP.sc_h * (APP.page - 1);
        if (APP.page == 3) {
            return;
        }
        $('.p2_down').css({
            'bottom': _bot + 'px',
            'opacity': 1
        }).animate({
            'bottom': _bot - 10 + 'px',
            'opacity': 0
        }, 1200, function() {
            clearTimeout(APP.fn_timer);
            APP.fn_timer = setTimeout(function() {
                APP._animate_down_fn();
            }, 1000);
        });
    },
    _check_screen_size: function() {
        if (document.compatMode == "BackCompat") {
            var Node = document.body;
        } else {
            var Node = document.documentElement;
        }
        var page_w = Math.max(Node.scrollWidth, Node.clientWidth),
                page_h = Math.max(Node.scrollHeight, Node.clientHeight);

        this.sc_w = page_w;
        this.sc_h = page_h;

        this.dTips.css({
            'width': this.sc_w + 'px',
            'height': this.sc_h + 'px'
        });

        this.dSubPages.css({
            'width': this.sc_w + 'px',
            'height': this.sc_h + 'px'
        });
        if(this.sc_h <= 480){
            $('.a1 img, .a2 img, .a3 img, .a4 img, .page2 p').css({
                'left' : '22px',
                'width' : '85%'
            });
            $('.page2 table').css({
                'top' : '4%',
                'line-height' : '26px',
                'font-size' : '16px'
            });
        }
    }
};

$(document).ready(function() {

    
    var args = {};
    //referer 回来的请求直接打开申请页面
    var isStr = document.URL.split('?')[1];
    if (isStr) {
        var ReStr = isStr.split('=');
        if (ReStr[0] === 'isReferer' && ReStr[1] === 'yes') {
            args.showForm = 1;
        }
    }
    
    APP.init(args);

});