/*
火龙果 - html5开发
http://www.huolg.net
*/
var car2 = {
/****************************************************************************************************/
/* 对象私有变量/函数返回值/通用处理函数
*****************************************************************************************************/
/*************************
* = 对象变量,判断函数
*************************/
_events : {}, // 自定义事件---this._execEvent('scrollStart');
_windowHeight : $(window).height(), // 设备屏幕高度
_windowWidth : $(window).width(),
_rotateNode : $('.p-ct'), // 旋转体
_page : $('.m-page'), // 模版页面切换的页面集合
_pageNum : $('.m-page').size(), // 模版页面的个数
_pageNow : 0, // 页面当前的index数
_pageNext : null, // 页面下一个的index数
_touchStartValY : 0, // 触摸开始获取的第一个值
_touchDeltaY : 0, // 滑动的距离
_moveStart : true, // 触摸移动是否开始
_movePosition : null, // 触摸移动的方向(上、下)
_movePosition_c : null, // 触摸移动的方向的控制
_mouseDown : false, // 判断鼠标是否按下
_moveFirst : true,
_moveInit : false,
_firstChange : false,
_map : $('.ylmap'), // 地图DOM对象
_mapValue : null, // 地图打开时,存储最近打开的一个地图
_mapIndex : null, // 开启地图的坐标位置
_audioNode : $('.u-audio'), // 声音模块
_audio : null, // 声音对象
_audio_val : true, // 声音是否开启控制
_elementStyle : document.createElement('div').style, // css属性保存对象
_UC : RegExp("Android").test(navigator.userAgent)&&RegExp("UC").test(navigator.userAgent)? true : false,
_weixin : RegExp("MicroMessenger").test(navigator.userAgent)? true : false,
_iPhoen : RegExp("iPhone").test(navigator.userAgent)||RegExp("iPod").test(navigator.userAgent)||RegExp("iPad").test(navigator.userAgent)? true : false,
_Android : RegExp("Android").test(navigator.userAgent)? true : false,
_IsPC : function(){
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag;
} ,
_isload : false ,//是否加载音乐
_audio_src :"", //音乐url
/***********************
* = gobal通用函数
***********************/
// 判断函数是否是null空值
_isOwnEmpty : function (obj) {
for(var name in obj) {
if(obj.hasOwnProperty(name)) {
return false;
}
}
return true;
},
// 微信初始化函数
_WXinit : function(callback){
if(typeof window.WeixinJSBridge == 'undefined' || typeof window.WeixinJSBridge.invoke == 'undefined'){
setTimeout(function(){
this.WXinit(callback);
},200);
}else{
callback();
}
},
// 判断浏览器内核类型
_vendor : function () {
var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
transform,
i = 0,
l = vendors.length;
for ( ; i < l; i++ ) {
transform = vendors[i] + 'ransform';
if ( transform in this._elementStyle ) return vendors[i].substr(0, vendors[i].length-1);
}
return false;
},
// 判断浏览器来适配css属性值
_prefixStyle : function (style) {
if ( this._vendor() === false ) return false;
if ( this._vendor() === '' ) return style;
return this._vendor() + style.charAt(0).toUpperCase() + style.substr(1);
},
// 判断是否支持css transform-3d(需要测试下面属性支持)
_hasPerspective : function(){
var ret = this._prefixStyle('perspective') in this._elementStyle;
if ( ret && 'webkitPerspective' in this._elementStyle ) {
this._injectStyles('@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}', function( node, rule ) {
ret = node.offsetLeft === 9 && node.offsetHeight === 3;
});
}
return !!ret;
},
_translateZ : function(){
if(car2._hasPerspective){
return ' translateZ(0)';
}else{
return '';
}
},
// 判断属性支持是否
_injectStyles : function( rule, callback, nodes, testnames ) {
var style, ret, node, docOverflow,
div = document.createElement('div'),
body = document.body,
fakeBody = body || document.createElement('body'),
mod = 'modernizr';
if ( parseInt(nodes, 10) ) {
while ( nodes-- ) {
node = document.createElement('div');
node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
div.appendChild(node);
}
}
style = ['',''].join('');
div.id = mod;
(body ? div : fakeBody).innerHTML += style;
fakeBody.appendChild(div);
if ( !body ) {
fakeBody.style.background = '';
fakeBody.style.overflow = 'hidden';
docOverflow = docElement.style.overflow;
docElement.style.overflow = 'hidden';
docElement.appendChild(fakeBody);
}
ret = callback(div, rule);
if ( !body ) {
fakeBody.parentNode.removeChild(fakeBody);
docElement.style.overflow = docOverflow;
} else {
div.parentNode.removeChild(div);
}
return !!ret;
},
// 自定义事件操作
_handleEvent : function (type) {
if ( !this._events[type] ) {
return;
}
var i = 0,
l = this._events[type].length;
if ( !l ) {
return;
}
for ( ; i < l; i++ ) {
this._events[type][i].apply(this, [].slice.call(arguments, 1));
}
},
// 给自定义事件绑定函数
_on : function (type, fn) {
if ( !this._events[type] ) {
this._events[type] = [];
}
this._events[type].push(fn);
},
//禁止滚动条
_scrollStop : function(){
//禁止滚动
$(window).on('touchmove.scroll',this._scrollControl);
$(window).on('scroll.scroll',this._scrollControl);
},
//启动滚动条
_scrollStart : function(){
//开启屏幕禁止
$(window).off('touchmove.scroll');
$(window).off('scroll.scroll');
},
//滚动条控制事件
_scrollControl : function(e){e.preventDefault();},
/**************************************************************************************************************/
/* 关联处理函数
***************************************************************************************************************/
/**
* 单页面-m-page 切换的函数处理
* -->绑定事件
* -->事件处理函数
* -->事件回调函数
* -->事件关联函数【
*/
// 页面切换开始
page_start : function(){
car2._page.on('touchstart mousedown',car2.page_touch_start);
car2._page.on('touchmove mousemove',car2.page_touch_move);
car2._page.on('touchend mouseup',car2.page_touch_end);
},
// 页面切换停止
page_stop : function(){
car2._page.off('touchstart mousedown');
car2._page.off('touchmove mousemove');
car2._page.off('touchend mouseup');
},
// page触摸移动start
page_touch_start: function(e){
var $self = car2._page.eq(car2._pageNow);
lastPage = $self.next('.m-page').length ;
if(!car2._moveStart ) return;
if(e.type == "touchstart"){
car2._touchStartValY = window.event.touches[0].pageY;
}else{
car2._touchStartValY = e.pageY||e.y;
car2._mouseDown = true;
}
car2._moveInit = true;
// start事件
car2._handleEvent('start');
},
// page触摸移动move
page_touch_move : function(e){
e.preventDefault();
if(!car2._moveStart) return;
if(!car2._moveInit) return;
// 设置变量值
var $self = car2._page.eq(car2._pageNow),
h = parseInt($self.height()),
moveP,
scrollTop,
node=null,
move=false;
// 获取移动的值
if(e.type == "touchmove"){
moveP = window.event.touches[0].pageY;
move = true;
}else{
if(car2._mouseDown){
moveP = e.pageY||e.y;
move = true;
}else return;
}
// 获取下次活动的page
node = car2.page_position(e,moveP,$self);
// page页面移动
car2.page_translate(node);
// move事件
car2._handleEvent('move');
},
// page触摸移动判断方向
page_position : function(e,moveP,$self){
var now,next;
// 设置移动的距离
if(moveP!='undefined') car2._touchDeltaY = moveP - car2._touchStartValY;
// 设置移动方向
car2._movePosition = moveP - car2._touchStartValY >0 ? 'down' : 'up';
if(car2._movePosition!=car2._movePosition_c){
car2._moveFirst = true;
car2._movePosition_c = car2._movePosition;
}else{
car2._moveFirst = false;
}
// 设置下一页面的显示和位置
if(car2._touchDeltaY <= 0){
if($self.next('.m-page').length == 0){
// console.log("最后一页");
// car2._moveStart = false ;
car2._pageNext = 0;
} else {
car2._pageNext = car2._pageNow+1;
}
next = car2._page.eq(car2._pageNext)[0];
}else{
car2._moveStart = true ;
if($self.prev('.m-page').length == 0 ) {
if (car2._firstChange) {
car2._pageNext = car2._pageNum - 1;
} else {
return;
}
} else {
car2._pageNext = car2._pageNow-1;
}
next = car2._page.eq(car2._pageNext)[0];
}
now = car2._page.eq(car2._pageNow)[0];
node = [next,now];
// move阶段根据方向设置页面的初始化位置--执行一次
if(car2._moveFirst) init_next(node);
function init_next(node){
var s,l,_translateZ = car2._translateZ();
car2._page.removeClass('action');
$(node[1]).addClass('action').removeClass('f-hide');
car2._page.not('.action').addClass('f-hide');
// 模版高度适配函数处理
car2.height_auto(car2._page.eq(car2._pageNext),'false');
// 显示对应移动的page
$(node[0]).removeClass('f-hide').addClass('active');
// 设置下一页面的显示和位置
if(car2._movePosition=='up'){
s = parseInt($(window).scrollTop());
if(s>0) l = $(window).height()+s;
else l = $(window).height();
node[0].style[car2._prefixStyle('transform')] = 'translate(0,'+l+'px)'+_translateZ;
$(node[0]).attr('data-translate',l);
$(node[1]).attr('data-translate',0);
}else{
node[0].style[car2._prefixStyle('transform')] = 'translate(0,-'+Math.max($(window).height(),$(node[0]).height())+'px)'+_translateZ;
$(node[0]).attr('data-translate',-Math.max($(window).height(),$(node[0]).height()));
$(node[1]).attr('data-translate',0);
}
}
return node;
},
// page触摸移动设置函数
page_translate : function(node){
// 没有传值返回
if(!node) return;
var _translateZ = car2._translateZ(),
y_1,y_2,scale,
y = car2._touchDeltaY;
// 切换的页面移动
if($(node[0]).attr('data-translate')) y_1 = y + parseInt($(node[0]).attr('data-translate'));
node[0].style[car2._prefixStyle('transform')] = 'translate(0,'+y_1+'px)'+_translateZ;
// 当前的页面移动
if($(node[1]).attr('data-translate')) y_2 = y + parseInt($(node[1]).attr('data-translate'));
scale = 1 - Math.abs(y*0.2/$(window).height());
y_2 = y_2/5;
node[1].style[car2._prefixStyle('transform')] = 'translate(0,'+y_2+'px)'+_translateZ+' scale('+scale+')';
},
// page触摸移动end
page_touch_end : function(e){
car2._moveInit = false;
car2._mouseDown = false;
if(!car2._moveStart) return;
if(!car2._pageNext&&car2._pageNext!=0) return;
car2._moveStart = false;
// 确保移动了
if(Math.abs(car2._touchDeltaY)>10){
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transition')] = 'all .3s';
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transition')] = 'all .3s';
}
// 页面切换
if(Math.abs(car2._touchDeltaY)>=100){ // 切换成功
car2.page_success();
}else if(Math.abs(car2._touchDeltaY)>10&&Math.abs(car2._touchDeltaY)<100){ // 切换失败
car2.page_fial();
}else{ // 没有切换
car2.page_fial();
}
// end事件
car2._handleEvent('end');
// 注销控制值
car2._movePosition = null;
car2._movePosition_c = null;
car2._touchStartValY = 0;
if($('#j-mengban').hasClass('z-show')){
if(car2._pageNext == mengvalue){
car2.page_stop();
}
}
},
// 切换成功
page_success : function(){
var _translateZ = car2._translateZ();
// 下一个页面的移动
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transform')] = 'translate(0,0)'+_translateZ;
// 当前页面变小的移动
var y = car2._touchDeltaY > 0 ? $(window).height()/5 : -$(window).height()/5;
var scale = 0.8;
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transform')] = 'translate(0,'+y+'px)'+_translateZ+' scale('+scale+')';
// 成功事件
car2._handleEvent('success');
},
// 切换失败
page_fial : function(){
var _translateZ = car2._translateZ();
// 判断是否移动了
if(!car2._pageNext&&car2._pageNext!=0) {
car2._moveStart = true;
car2._moveFirst = true;
return;
}
if(car2._movePosition=='up'){
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transform')] = 'translate(0,'+$(window).height()+'px)'+_translateZ;
}else{
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transform')] = 'translate(0,-'+$(window).height()+'px)'+_translateZ;
}
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transform')] = 'translate(0,0)'+_translateZ+' scale(1)';
// fial事件
car2._handleEvent('fial');
},
/**
* 对象函数事件绑定处理
* -->start touch开始事件
* -->mov move移动事件
* -->end end结束事件
*/
haddle_envent_fn : function(){
// 当前页面移动,延迟加载以后的图片
car2._on('start',car2.lazy_bigP);
// 当前页面移动
car2._on('move',function(){
});
// 切换失败事件
car2._on('fial',function(){
setTimeout(function(){
car2._page.eq(car2._pageNow).attr('data-translate','');
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transform')] = '';
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transition')] = '';
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transform')] = '';
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transition')] = '';
car2._page.eq(car2._pageNext).removeClass('active').addClass('f-hide');
car2._moveStart = true;
car2._moveFirst = true;
car2._pageNext = null;
car2._touchDeltaY = 0;
car2._page.eq(car2._pageNow).attr('style','');
},300)
})
// 切换成功事件
car2._on('success',function(){
// 判断最后一页让,开启循环切换
if (car2._pageNext == 0 && car2._pageNow == car2._pageNum -1) {
car2._firstChange = true;
//window.location.href="http://www.5.cn/magazine/822/1883/index.html";
}
// 判断是否是最后一页,让轻APP关联页面隐藏
if(car2._page.eq(car2._pageNext).next('.m-page').length != 0){
car2.lightapp_intro_hide(true);
}
setTimeout(function(){
// 设置富文本的高度
car2.Txt_init(car2._page.eq(car2._pageNow));
// 判断是否为最后一页,显示或者隐藏箭头
if(car2._pageNext == car2._pageNum-1 ) $('.u-arrow').addClass('f-hide');
else $('.u-arrow').removeClass('f-hide');
car2._page.eq(car2._pageNow).addClass('f-hide');
car2._page.eq(car2._pageNow).attr('data-translate','');
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transform')] = '';
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transition')] = '';
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transform')] = '';
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transition')] = '';
// 初始化切换的相关控制值
$('.p-ct').removeClass('fixed');
car2._page.eq(car2._pageNext).removeClass('active');
car2._page.eq(car2._pageNext).removeClass('fixed');
car2._pageNow = car2._pageNext;
car2._moveStart = true;
car2._moveFirst = true;
car2._pageNext = null;
car2._page.eq(car2._pageNow).attr('style','');
car2._page.eq(car2._pageNow).removeClass('fixed');
car2._page.eq(car2._pageNow).attr('data-translate','');
car2._touchDeltaY = 0;
// 切换成功后,执行当前页面的动画---延迟200ms
setTimeout(function(){
if(car2._page.eq(car2._pageNow).hasClass('z-animate')) return;
car2._page.eq(car2._pageNow).addClass('z-animate');
},20)
// 隐藏图文组件的文本
$('.j-detail').removeClass('z-show');
$('.txt-arrow').removeClass('z-toggle');
// 切换停止视频的播放
$('video').each(function(){
if(!this.paused) this.pause();
})
// 设置富文本的高度
car2.Txt_init(car2._page.eq(car2._pageNow));
// 判断是否滑动最后一页,并让轻APP介绍关联页面贤淑
if(car2._page.eq(car2._pageNow).next().next('.m-page').length == 0){
car2.lightapp_intro_show();
car2.lightapp_intro();
$(".market-notice").show();
}
if(car2._page.eq(car2._pageNow).next('.m-page').length == 0){
car2.lightapp_intro_hide(false);
$(".market-notice").hide();
}
},300)
// 切换成功后,发送统计
var laytouType = car2._page.eq(car2._pageNow).attr('data-statics');
car2.ajaxTongji(laytouType);
})
},
/**
* 地图创建函数处理
* -->绑定事件
* -->事件处理函数
* -->创建地图
* -->函数传值
* -->关闭函数回调处理
*/
// 自定义绑定事件
mapAddEventHandler : function(obj,eventType,fn,option){
var fnHandler = fn;
if(!car2._isOwnEmpty(option)){
fnHandler = function(e){
fn.call(this, option); //继承监听函数,并传入参数以初始化;
}
}
obj.each(function(){
$(this).on(eventType,fnHandler);
})
},
//点击地图按钮显示地图
mapShow : function(option){
// 获取各自地图的资源信息
var str_data = $(this).attr('data-detal');
option.detal = str_data != '' ? eval('('+str_data+')') : '';
option.latitude = $(this).attr('data-latitude');
option.longitude = $(this).attr('data-longitude');
// 地图添加
var detal = option.detal,
latitude = option.latitude,
longitude = option.longitude,
fnOpen = option.fnOpen,
fnClose = option.fnClose;
car2._scrollStop();
car2._map.addClass('show');
$(document.body).animate({scrollTop: 0}, 0);
//判断开启地图的位置是否是当前的
if($(this).attr('data-mapIndex')!=car2._mapIndex){
car2._map.html($('
'));
car2._mapValue = false;
car2._mapIndex = $(this).attr('data-mapIndex');
}else{
car2._mapValue = true;
}
setTimeout(function(){
//将地图显示出来
if(car2._map.find('div').length>=1){
car2._map.addClass("mapOpen");
car2.page_stop();
car2._scrollStop();
car2._audioNode.addClass('z-low');
// 设置层级关系-z-index
car2._page.eq(car2._pageNow).css('z-index',15);
setTimeout(function(){
//如果开启地图的位置不一样则,创建新的地图
if(!car2._mapValue) car2.addMap(detal,latitude,longitude,fnOpen,fnClose);
},500)
}else return;
},100)
},
//地图关闭,将里面的内容清空(优化DON结构)
mapSave : function(){
$(window).on('webkitTransitionEnd transitionend',mapClose);
car2.page_start();
car2._scrollStart();
car2._map.removeClass("mapOpen");
car2._audioNode.removeClass('z-low');
if(!car2._mapValue) car2._mapValue = true;
function mapClose(){
car2._map.removeClass('show');
// 设置层级关系-z-index
car2._page.eq(car2._pageNow).css('z-index',9);
$(window).off('webkitTransitionEnd transitionend');
}
},
//地图函数传值,创建地图
addMap : function (detal,latitude,longitude,fnOpen,fnClose){
var detal = detal,
latitude = Number(latitude),
longitude = Number(longitude);
var fnOpen = typeof(fnOpen)==='function'? fnOpen : '',
fnClose = typeof(fnClose)==='function'? fnClose : '';
//默认值设定
var a = {sign_name:'',contact_tel:'',address:'天安门'};
//检测传值是否为空,设置传值
car2._isOwnEmpty(detal) ? detal=a:detal=detal;
!latitude? latitude=39.915:latitude=latitude;
!longitude? longitude=116.404:longitude=longitude;
//创建地图
car2._map.ylmap({
/*参数传递,默认为天安门坐标*/
//需要执行的函数(回调)
detal : detal, //地址值
latitude : latitude, //纬度
longitude : longitude, //经度
fnOpen : fnOpen, //回调函数,地图开启前
fnClose : fnClose //回调函数,地图关闭后
});
},
//绑定地图出现函数
mapCreate : function(){
if('.j-map'.length<=0) return;
var node = $('.j-map');
//option地图函数的参数
var option ={
fnOpen : car2._scrollStop,
fnClose : car2.mapSave
};
car2.mapAddEventHandler(node,'click',car2.mapShow,option);
},
/**
* media资源管理
* -->绑定声音控制事件
* -->函数处理声音的开启和关闭
* -->异步加载声音插件(延迟做)
* -->声音初始化
* -->视频初始化
* -->声音和视频切换的控制
*/
// 声音初始化
audio_init : function(){
// media资源的加载
var options_audio = {
loop: true,
preload: "auto",
src: car2._audioNode.attr('data-src')
}
car2._audio = new Audio();
for(var key in options_audio){
if(options_audio.hasOwnProperty(key) && (key in car2._audio)){
car2._audio[key] = options_audio[key];
}
}
car2._audio.load();
},
// 声音事件绑定
audio_addEvent : function(){
if(car2._audioNode.length<=0) return;
// 声音按钮点击事件
var txt = car2._audioNode.find('.txt_audio'),
time_txt = null;
car2._audioNode.find('.btn_audio').on('click',car2.audio_contorl);
// 声音打开事件
$(car2._audio).on('play',function(){
car2._audio_val = false;
audio_txt(txt,true,time_txt);
// 开启音符冒泡
$.fn.coffee.start();
$('.coffee-steam-box').show(500);
})
// 声音关闭事件
$(car2._audio).on('pause',function(){
audio_txt(txt,false,time_txt)
// 关闭音符冒泡
$.fn.coffee.stop();
$('.coffee-steam-box').hide(500);
})
function audio_txt(txt,val,time_txt){
if(val) txt.text('打开');
else txt.text('关闭');
if(time_txt) clearTimeout(time_txt);
txt.removeClass('z-move z-hide');
time_txt = setTimeout(function(){
txt.addClass('z-move').addClass('z-hide');
},1000)
}
},
// 声音控制函数
audio_contorl : function(){
if(!car2._audio_val){
car2.audio_stop();
}else{
car2.audio_play();
}
},
// 声音播放
audio_play : function(){
car2._audio_val = false;
if(car2._audio) car2._audio.play();
},
// 声音停止
audio_stop : function(){
car2._audio_val = true;
if(car2._audio) car2._audio.pause();
},
// 视频初始化
video_init : function(){
// 视频
$('.j-video').each(function(){
var option_video = {
controls: 'controls',
preload : 'none',
// poster : $(this).attr('data-poster'),
width : $(this).attr('data-width'),
height : $(this).attr('data-height'),
src : $(this).attr('data-src')
}
var video = $('')[0];
for(var key in option_video){
if(option_video.hasOwnProperty(key) && (key in video)){
video[key] = option_video[key];
}
this.appendChild(video);
}
var img = $(video).prev();
$(video).on('play',function(){
img.hide();
$(video).removeClass('f-hide');
});
$(video).on('pause',function(){
img.show();
$(video).addClass('f-hide');
});
})
$('.j-video .img').on('click',function(){
var video = $(this).next()[0];
if(video.paused){
$(video).removeClass('f-hide');
video.play();
$(this).hide();
}
})
},
//处理声音和动画的切换
media_control : function(){
if(!car2._audio) return;
if($('video').length<=0) return;
$(car2._audio).on('play', function(){
$('video').each(function(){
if(!this.paused){
this.pause();
}
});
});
$('video').on('play', function(){
if(!car2._audio_val){
car2.audio_contorl();
}
});
},
// media管理初始化
media_init : function(){
// 声音初始化
car2.audio_init();
// 视频初始化
car2.video_init();
// 绑定音乐加载事件
car2.audio_addEvent();
// 音频切换
car2.media_control();
},
/**
* 图片延迟加载功能
* -->替代需要延迟加载的图片
* -->优化加载替代图片
* -->切换功能触发图片的延迟加载
* -->替代图片为400*400的透明大图片
*/
/* 图片延迟加载 */
lazy_img : function(){
var lazyNode = $('.lazy-img');
lazyNode.each(function(){
var self = $(this);
if(self.is('img')){
self.attr('src','http://img0.hx.com/magazine/img/load.gif');
}else{
// 把原来的图片预先保存下来
var position = self.css('background-position'),
size = self.css('background-size');
self.attr({
'data-position' : position,
'data-size' : size
});
if(self.attr('data-bg')=='no'){
self.css({
'background-repeat' : 'no-repeat'
})
}
self.css({
'background-image' : 'url(http://img0.hx.com/magazine/img/load.gif)',
'background-size' : '120px 120px',
'background-position': 'center'
})
if(self.attr('data-image')=='no'){
self.css({
'background-image' : 'none'
})
}
}
})
},
// 开始加载前三个页面
lazy_start : function(){
// 前三个页面的图片延迟加载
setTimeout(function(){
for(var i=0;i<3;i++){
var node = $(".m-page").eq(i);
if(node.length==0) break;
if(node.find('.lazy-img').length!=0){
car2.lazy_change(node,false);
// 飞出窗口的延迟
if(node.attr('data-page-type')=='flyCon'){
car2.lazy_change($('.m-flypop'),false);
}
}else continue;
}
},200)
},
// 加载当前后面第三个
lazy_bigP : function(){
for(var i=3;i<=5;i++){
var node = $(".m-page").eq(car2._pageNow+i);
if(node.length==0) break;
if(node.find('.lazy-img').length!=0){
car2.lazy_change(node,false);
// 飞出窗口的延迟
if(node.attr('data-page-type')=='flyCon'){
car2.lazy_change($('.m-flypop'),false);
}
}else continue;
}
},
// 图片延迟替换函数
lazy_change : function(node,goon){
// 3d图片的延迟加载
if(node.attr('data-page-type')=='3d') car2.lazy_3d(node);
// 飞出窗口的延迟
if(node.attr('data-page-type')=='flyCon'){
var img = $('.m-flypop').find('.lazy-img');
img.each(function(){
var self = $(this),
srcImg = self.attr('data-src');
$('')
.on('load',function(){
if(self.is('img')){
self.attr('src',srcImg)
}
})
.attr("src",srcImg);
})
}
// 其他图片的延迟加载
var lazy = node.find('.lazy-img');
lazy.each(function(){
var self = $(this),
srcImg = self.attr('data-src'),
position = self.attr('data-position'),
size = self.attr('data-size');
if(self.attr('data-bg')!='no'){
$('')
.on('load',function(){
if(self.is('img')){
self.attr('src',srcImg)
}else{
self.css({
'background-image' : 'url('+srcImg+')',
'background-position' : position,
'background-size' : size
})
}
// 判断下面页面进行加载
if(goon){
for(var i =0;i<$(".m-page").size();i++){
var page = $(".m-page").eq(i);
if($(".m-page").find('.lazy-img').length==0) continue
else{
car2.lazy_change(page,true);
}
}
}
})
.attr("src",srcImg);
self.removeClass('lazy-img').addClass('lazy-finish');
}else{
if(self.attr('data-auto')=='yes') self.css('background','none');
}
})
},
/**
* 表单验证函数控制
* -->提交按钮的点击事件
* -->每一个表单的输入值进行验证
* -->正则验证的函数
* -->异步提交的函数
* -->提交显示信息的函数
*/
// 提交按钮点击,进行验证函数
signUp_submit : function(){
$('#j-signUp-submit').on('click',function(e){
console.log('click')
e.preventDefault();
var form = $(this).parents('#j-signUp');
var valid = car2.signUpCheck_input(form);
if(valid) {
car2.signUpCheck_submit(form);
}
else return;
})
},
// 我要报名表单验证函数
signUpCheck_input : function (form, type){
var valid = true;
var inputs = form.find('input');
inputs.each(function(){
if(this.name != '' && this.name != 'undefined'){
//函数验证
var name = this.name;
var backData = car2.regFunction(name);
var empty_tip = backData.empty_tip,
reg = backData.reg,
reg_tip = backData.reg_tip;
//根据结果处理
if ($.trim($(this).val()) == '') {
car2.showCheckMessage(empty_tip, true);
$(this).focus();
$(this).addClass('z-error');
valid = false;
return false;
}
if (reg != undefined && reg != '') {
if(!$(this).val().match(reg)){
$(this).focus();
$(this).addClass('z-error');
car2.showCheckMessage(reg_tip, true);
valid = false;
return false;
}
}
$(this).removeClass('z-error');
$('.u-note-error').html('');
}
});
if (valid == false) {
return false;
}else{
return true;
}
},
// 正则函数验证
regFunction : function(inputName){
var empty_tip = '',
reg_tip = '',
reg = '';
//判断
switch (inputName) {
case 'name':
reg = /^[\u4e00-\u9fa5|a-z|A-Z|\s]{1,20}$/;
empty_tip = '不能落下姓名哦!';
reg_tip = '这名字太怪了!';
break;
case 'sex':
empty_tip = '想想,该怎么称呼您呢?';
reg_tip = '想想,该怎么称呼您呢?';
break;
case 'tel':
reg = /^1[0-9][0-9]\d{8}$/;
empty_tip = '有个联系方式,就更好了!';
reg_tip = '这号码,可打不通... ';
break;
case 'email':
reg = /(^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$)/i;
empty_tip = '都21世纪了,应该有个电子邮箱吧!';
reg_tip = '邮箱格式有问题哦!';
break;
case 'company':
reg = /^[\u4e00-\u9fa5|a-z|A-Z|\s|\d]{1,20}$/;
empty_tip = '填个公司吧!';
reg_tip = '这个公司太奇怪了!';
break;
case 'job':
reg = /^[\u4e00-\u9fa5|a-z|A-Z|\s]{1,20}$/;
empty_tip = '请您填个职位';
reg_tip = '这个职位太奇怪了!';
break;
case 'date':
empty_tip = '给个日期吧!';
reg_tip = '';
break;
case 'time':
empty_tip = '填下具体时间更好哦!' ;
reg_tip = '' ;
break;
case 'age':
reg = /^([3-9])|([1-9][0-9])|([1][0-3][0-9])$/;
empty_tip = '有个年龄就更好了!';
reg_tip = '这年龄可不对哦!' ;
break;
}
return {
empty_tip :empty_tip,
reg_tip :reg_tip,
reg :reg
}
},
// ajax异步提交表单数据
signUpCheck_submit : function (form){
car2.loadingPageShow();
var url = '/auto/submit/'+$('#activity_id').val();
// // ajax提交数据
$.ajax({
url: url,
cache: false,
dataType: 'json',
async: true,
type:'POST',
data: form.serialize(),
success: function(msg){
car2.loadingPageHide();
if(msg.code==200){
// 提示成功
car2.showCheckMessage('提交成功!',true)
// 关闭窗口
setTimeout(function(){
$('.book-form').removeClass('z-show');
$('.book-bg').removeClass('z-show');
setTimeout(function(){
$(document.body).css('height','100%');
car2.page_start();
car2._scrollStop();
$('.book-bg').addClass('f-hide');
$('.book-form').addClass('f-hide');
},500)
},1000)
// 按钮变色
$('.book-bd .bd-form .btn').addClass("z-stop");
$('.book-bd .bd-form .btn').attr("data-submit",'true');
}else if(msg.code=='400'){
car2.showCheckMessage('提交失败',false);
}
},
error : function (XMLHttpRequest, textStatus, errorThrown) {
car2.showCheckMessage(errorThrown,true);
setTimeout(function(){
car2.loadingPageHide();
},500)
}
})
},
// 显示验证信息
showCheckMessage : function (msg, error) {
if (error) {
$('.u-note-error').html(msg);
$(".u-note-error").addClass("on");
$(".u-note-sucess").removeClass("on");
setTimeout(function(){
$(".u-note").removeClass("on");
},2000);
} else {
$(".u-note-sucess").addClass("on");
$(".u-note-error").removeClass("on");
setTimeout(function(){
$(".u-note").removeClass("on");
},2000);
}
},
/**************************************************************************************************************/
/* 单个处理函数
***************************************************************************************************************/
/**
* 单个函数处理-unit
* -->高度的计算
* -->文本的展开
* -->文本的收起
* -->输入表单的操作
* -->微信的分享提示
*/
// 根据设备的高度,来适配每一个模版的高度,并且静止滑动
// --文档初始化计算
// --页面切换完成计算
height_auto : function(ele,val){
ele.children('.page-con').css('height','auto');
var height = $(window).height();
// 需要解除固定高度的page卡片
var vial = true;
if(!vial){
if(ele.height()<=height){
ele.children('.page-con').height(height+2);
if((!$('.p-ct').hasClass('fixed'))&&val=='true') $('.p-ct').addClass('fixed');
}else{
car2._scrollStart();
if(val=='true') $('.p-ct').removeClass('fixed');
ele.children('.page-con').css('height','100%');
return;
}
}else{
ele.children('.page-con').height(height+2);
if((!$('.p-ct').hasClass('fixed'))&&val=='true') $('.p-ct').addClass('fixed');
}
},
// 富文本的设置
Txt_init : function(node){
if(node.find('.j-txt').length<=0) return;
if(node.find('.j-txt').find('.j-detail p').length<=0) return;
node.find('.j-txt').each(function(){
var txt = $(this).find('.j-detail'),
title = $(this).find('.j-title'),
arrow = title.find('.txt-arrow'),
p = txt.find('p'),
height_t = parseInt(title.height()),
height_p = parseInt(p.height()),
height_a = height_p+height_t;
if ($(this).parents('.m-page').hasClass('m-smallTxt')) {
if ($(this).parents('.smallTxt-bd').index() == 0) {
txt.css('top',height_t);
} else {
txt.css('bottom',height_t);
}
}
txt.attr('data-height',height_p);
$(this).attr('data-height-init',height_t);
$(this).attr('data-height-extand',height_a);
p[0].style[car2._prefixStyle('transform')] = 'translate(0,-'+height_p+'px)';
if($(this.parentNode).hasClass('z-left')) p[0].style[car2._prefixStyle('transform')] = 'translate(0,'+height_p+'px)';
txt.css('height','0');
arrow.removeClass('z-toggle');
$(this).css('height',height_t);
})
},
// 富文本组件点击展开详细内容
bigTxt_extand : function(){
$('body').on('click','.j-title',function(){
if($('.j-detail').length<=0) return;
// 定位
var detail = $(this.parentNode).find('.j-detail');
$('.j-detail').removeClass('action');
detail.addClass('action');
if($(this).hasClass('smallTxt-arrow')){
$('.smallTxt-bd').removeClass('action');
detail.parent().addClass('action');
}
// 设置
if(detail.hasClass('z-show')){
detail.removeClass('z-show');
detail.css('height',0);
$(this.parentNode).css('height',parseInt($(this.parentNode).attr('data-height-init')));
}
else{
detail.addClass('z-show');
detail.css('height',parseInt(detail.attr('data-height')));
$(this.parentNode).css('height',parseInt($(this.parentNode).attr('data-height-extand')));
}
$('.j-detail').not('.action').removeClass('z-show');
$('.txt-arrow').removeClass('z-toggle');
detail.hasClass('z-show') ? ($(this).find('.txt-arrow').addClass('z-toggle')) : ($(this).find('.txt-arrow').removeClass('z-toggle'))
})
}(),
// 文本点击其他地方收起
Txt_back : function(){
$('body').on('click','.m-page',function(e){
e.stopPropagation();
// 判断
var node = $(e.target);
var page = node.parents('.m-page');
var txtWrap = node.parents('.j-txtWrap').length==0 ? node : node.parents('.j-txtWrap');
if(page.find('.j-txt').find('.j-detail p').length<=0) return;
if(page.find('.j-txt').length<=0||node.parents('.j-txt').length>=1 || node.hasClass('bigTxt-btn') || node.parents('.bigTxt-btn').length>=1) return;
// 定位
var detail = txtWrap.find('.j-detail');
$('.j-detail').removeClass('action');
detail.addClass('action');
$('.j-detail').not('.action').removeClass('z-show');
// 设置
txtWrap.each(function(){
var detail = $(this).find('.j-detail');
var arrow = $(this).find('.txt-arrow');
var txt = $(this).find('.j-txt');
if(detail.hasClass('z-show')){
detail.removeClass('z-show');
detail.css('height',0);
txt.css('height',parseInt(txt.attr('data-height-init')));
}else{
detail.addClass('z-show');
detail.css('height',parseInt(detail.attr('data-height')));
txt.css('height',parseInt(txt.attr('data-height-extand')));
}
detail.hasClass('z-show') ? (arrow.addClass('z-toggle')) : (arrow.removeClass('z-toggle'));
})
})
}(),
// 表单显示,输入
input_form : function(){
$('body').on('click','.book-bd .bd-form .btn',function(){
var type_show = $(this).attr("data-submit");
if (type_show == 'true') {
return;
}
var heigt = $(window).height();
$(document.body).css('height',heigt);
car2.page_stop();
car2._scrollStart();
// 设置层级关系-z-index
car2._page.eq(car2._pageNow).css('z-index',15);
$('.book-bg').removeClass('f-hide');
$('.book-form').removeClass('f-hide');
setTimeout(function(){
$('.book-form').addClass('z-show');
$('.book-bg').addClass('z-show');
},50)
$('.book-bg').off('click');
$('.book-bg').on('click',function(e){
e.stopPropagation();
var node = $(e.target);
if(node.parents('.book-form').length>=1 && !node.hasClass('j-close-img') && node.parents('.j-close').length<=0) return;
$('.book-form').removeClass('z-show');
$('.book-bg').removeClass('z-show');
setTimeout(function(){
$(document.body).css('height','100%');
car2.page_start();
car2._scrollStop();
// 设置层级关系-z-index
car2._page.eq(car2._pageNow).css('z-index',9);
$('.book-bg').addClass('f-hide');
$('.book-form').addClass('f-hide');
},500)
})
})
}(),
sex_select : function(){
var btn = $('#j-signUp').find('.sex p');
var strongs = $('#j-signUp').find('.sex strong');
var input = $('#j-signUp').find('.sex input');
btn.on('click',function(){
var strong = $(this).find('strong');
strongs.removeClass('open');
strong.addClass('open');
var value = $(this).attr('data-sex');
input.val(value);
})
}(),
// 显示轻APP按钮
lightapp_intro_show : function(){
$('.market-notice').removeClass('f-hide');
setTimeout(function(){
$('.market-notice').addClass('show');
},100)
},
// 隐藏轻APP按钮
lightapp_intro_hide : function(val){
if(val){
$('.market-notice').addClass('f-hide').removeClass('show');
return;
}
$('.market-notice').removeClass('show');
setTimeout(function(){
$('.market-notice').addClass('f-hide')
},500)
},
// 轻APP介绍弹窗关联
lightapp_intro : function(){
// 点击按钮显示内容
$('.market-notice').off('click');
$('.market-notice').on('click',function(){
$('.market-page').removeClass('f-hide');
setTimeout(function(){
$('.market-page').addClass('show');
setTimeout(function(){
$('.market-img').addClass('show');
},100)
car2.lightapp_intro_hide();
},100)
// 禁止滑动
car2.page_stop();
car2._scrollStop();
});
// 点击窗口让内容隐藏
$('.market-page').off('click');
$('.market-page').on('click',function(e){
if($(e.target).hasClass('market-page')){
$('.market-img').removeClass('show');
setTimeout(function(){
$('.market-page').removeClass('show');
setTimeout(function(){
$('.market-page').addClass('f-hide');
},200)
},500)
car2.lightapp_intro_show();
// 禁止滑动
car2.page_start();
car2._scrollStart();
}
});
},
//统计函数处理
ajaxTongji : function(laytouType){
var channel_id = location.search.substr(location.search.indexOf("channel=") + 8);
channel_id= channel_id.match(/^\d+/) ;
if (!channel_id || isNaN(channel_id) || channel_id<0) {
channel_id = 1;
}
var activity_id = $('#activity_id').val();
//var url = "/analyseplugin/plugin?activity_id="+activity_id + "&plugtype="+laytouType;
//报名统计请求
//$.get(url,{},function(){});
},
// 微信的分享提示
wxShare : function(){
$('body').on('click','.bigTxt-btn-wx',function(){
var img_wx = $(this).parent().find('.bigTxt-weixin');
img_wx.addClass('z-show');
car2.page_stop();
img_wx.on('click',function(){
$(this).removeClass('z-show');
car2.page_start();
$(this).off('click');
})
})
}(),
// loading显示
loadingPageShow : function(){
$('.u-pageLoading').show();
},
// loading隐藏
loadingPageHide : function (){
$('.u-pageLoading').hide();
},
// 对象私有变量刷新
refresh : function(){
$(window).height() = $(window).height();
car2._windowWidth = $(window).width();
},
/**************************************************************************************************************/
/* 函数初始化
***************************************************************************************************************/
/**
* 相关插件的启动
*/
//插件启动函数
plugin : function(){
// 地图
car2.mapCreate();
// 音符飘逸
$('#coffee_flow').coffee({
steams : ["",""],
steamHeight : 100,
steamWidth : 44
});
// 蒙板插件
//var node = $('#j-mengban')[0],
// url = 'img/page_01_bg@2x.jpg',
// canvas_url = $('#r-cover').val(),
// type = 'image',
// w = 640,
// h = $(window).height(),
// callback = car2.start_callback;
//
// car2.cover_draw(node,url,canvas_url,type,w,h,callback);
car2.start_callback();
// 微信分享
var option_wx = {};
if($('#r-wx-title').val()!='') option_wx.title = $('#r-wx-title').val();
if($('#r-wx-img').val()!='') option_wx.img = $('#r-wx-img').val();
if($('#r-wx-con').val()!='') option_wx.con = $('#r-wx-con').val();
if(car2._weixin) $(document.body).wx(option_wx);
},
// 蒙板插件初始化函数处理
cover_draw : function(node,url,canvas_url,type,w,h,callback){
if(node.style.display.indexOf('none')>-1) return;
var lottery = new Lottery(node, canvas_url, type, w, h, callback);
lottery.init();
},
menban_callback: function(){
$('#j-mengban').removeClass('z-show');
setTimeout(function(){
$('#j-mengban').addClass('f-hide');
},1500);
//alert(22);
car2.page_start();
//alert(11);
},
// 蒙板插件回调函数处理
start_callback : function(){
// 隐藏蒙板
//$('#j-mengban').removeClass('z-show');
// setTimeout(function(){
// $('#j-mengban').addClass('f-hide');
// },1500)
// 开启window的滚动
car2._scrollStart();
// 开启页面切换
car2.page_start();
// 箭头显示
$('.u-arrow').removeClass('f-hide');
// 播放声音
if(!car2._audio) return;
car2._audioNode.removeClass('f-hide');
car2._audio.play();
// 声音启动
$(document).one("touchstart", function(){
car2._audio.play();
});
// 蒙板插件
var node = $('#j-mengban')[0],
url = 'img/page_01_bg@2x.jpg',
canvas_url = $('#r-cover').val(),
type = 'image',
w = 640,
h = $(window).height(),
callback = car2.menban_callback;
car2.cover_draw(node,url,canvas_url,type,w,h,callback);
},
/**
* app初始化
*/
// 样式适配
styleInit : function(){
// 禁止文版被拖动
document.body.style.userSelect = 'none';
document.body.style.mozUserSelect = 'none';
document.body.style.webkitUserSelect = 'none';
// 判断设备的类型并加上class
if(car2._IsPC()) $(document.body).addClass('pc');
else $(document.body).addClass('mobile');
if(car2._Android) $(document.body).addClass('android');
if(car2._iPhoen) $(document.body).addClass('iphone');
// 判断是否有3d
if(!car2._hasPerspective()){
car2._rotateNode.addClass('transformNode-2d');
$(document.body).addClass('no-3d');
}
else{
car2._rotateNode.addClass('transformNode-3d');
$(document.body).addClass('perspective');
$(document.body).addClass('yes-3d');
}
// 图片延迟加载的处理
this.lazy_img();
// 设置富文本的高度
car2.Txt_init(car2._page.eq(car2._pageNow));
// 模版提示文字显示
setTimeout(function(){
$('.m-alert').find('strong').addClass('z-show');
},1000)
$('.u-arrow').on('touchmove',function(e){e.preventDefault()})
$('.p-ct').height($(window).height());
$('.m-page').height($(window).height());
$('#j-mengban').height($(window).height());
$('.translate-back').height($(window).height());
},
// 对象初始化
init : function(){
// 样式,标签的渲染
// 对象操作事件处理
this.styleInit();
this.haddle_envent_fn();
// 禁止滑动
// this._scrollStop();
// 绑定全局事件函数处理
// $(window).on('resize',function(){
// car2.refresh();
// })
$('input[type="hidden"]').appendTo($('body'));
// 图片预先加载
$('').attr('src',$('#r-cover').val());
$('').attr('src',$('.m-fengye').find('.page-con').attr('data-src'));
// loading执行一次
var loading_time = new Date().getTime();
$(window).on('load',function(){
var now = new Date().getTime();
var loading_end = false;
var time;
var time_del = now - loading_time;
if ( time_del >= 500 ) {
loading_end = true;
}
if ( loading_end ) {
time = 0;
} else {
time = 500 - time_del;
}
// loading完成后请求
setTimeout(function(){
// 模版提示隐藏
setTimeout(function(){
$('.m-alert').addClass('f-hide');
},1000)
// 显示正面
$('#j-mengban').addClass('z-show');
// 显示封面内容
setTimeout(function(){
$('.translate-back').removeClass('f-hide');
$('.m-fengye').removeClass('f-hide');
car2.height_auto(car2._page.eq(car2._pageNow),'false');
},1000)
// setTimeout(function(){
// window.scrollTo(0, 1);
// }, 0);
// media初始化
car2.media_init();
// 延迟加载后面三个页面图片
car2.lazy_start();
// 报名提交执行
car2.signUp_submit();
// 插件加载
car2.plugin();
var channel_id = location.search.substr(location.search.indexOf("channel=") + 8);
channel_id= channel_id.match(/^\d+/) ;
if (!channel_id || isNaN(channel_id) || channel_id<0) {
channel_id = 1;
}
var activity_id = $('#activity_id').val();
//var url = "/auto/analyse/"+activity_id + "?channel="+channel_id;
//报名统计请求
//$.get(url,{},function(){});
$('.p-ct').height($(window).height());
$('.m-page').height($(window).height());
$('#j-mengban').height($(window).height());
$('.translate-back').height($(window).height());
},time)
})
}
};
/*初始化对象函数*/
car2.init();