专题地址：
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);
});
时间： 2024-11-06 00:02:51