码迷,mamicode.com
首页 > 其他好文 > 详细

touch

时间:2017-12-29 21:47:53      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:end   loading   awl   ase   doc   pos   数组   nsf   androi   

//宝格丽 h5部分
var pics=[];
var isAndroid=false;
var videoplay=false;
var palying=true;
var pauseClick=false;
if(navigator.userAgent.indexOf("Android")>-1){
	isAndroid=true;
}
$(function(){
	$(‘.page1-iframe,.page1-iframe-w‘).css({‘width‘:($(window).height()*30/100)*492/270});
	imagesArray(); 
	if(($(window).width()/$(window).height())>600/952){
		$(‘.bg‘).css({‘width‘:‘100%‘,‘height‘:‘auto‘});
	}
	//video
	if(!isAndroid){
		$(‘.video-cover,.play-btn‘).click(function(){
			videoplay=true;
			$(‘.video-cover,.play-btn‘).hide();
			$(this).siblings(‘.page1-iframe‘).attr(‘src‘,‘http://v.qq.com/iframe/player.html?vid=p0168scj2ve&tiny=0&auto=1‘);
			playing=true;
			yinfuvideo();
		});
	}else{
		$(‘.video-cover,.play-btn‘).hide();
	}
});
//进度条
function imagesArray(){
	for(var i=0;i<document.querySelectorAll(‘img‘).length;i++){
		pics.push(document.querySelectorAll(‘img‘)[i].src);
	}
	_loadImages(pics, function(){
		$(‘.loadPage-w‘).hide();
		$(‘.swiper-container‘).css(‘opacity‘,‘1‘);
		$(‘.page1 .blink‘).addClass(‘blink-guang‘);
		init();
		$(‘.irrow‘).addClass(‘irrow_jump‘);
		$(‘#yinfu‘).fadeIn(‘slow‘);
		document.getElementById(‘audio‘).play();
		document.addEventListener(‘WeixinJSBridgeReady‘,function(){
			WeixinJSBridge.invoke(‘getNetworkType‘,{},function(e){
				document.getElementById(‘audio‘).play();
			});
		});
	});
}
function _loadImages(pics, callback, len){
	len = len || pics.length;
	if(pics.length){
		var IMG = new Image(),
			picelem = pics.shift();

		if(window._pandaImageLoadArray){
			window._pandaImageLoadArray = window._pandaImageLoadArray
		}else{
			window._pandaImageLoadArray = [];
		}
		window._pandaImageLoadArray.push(picelem);

		IMG.src = picelem;

		// 从数组中取出对象的一刻,就开始变化滚动条
		_drawLoadProgress(window._pandaImageLoadArray.length/(len*len));

		// 缓存处理
		if (IMG.complete) {
			window._pandaImageLoadArray.shift();
			return _loadImages(pics,callback, len); 
		}else{
			// 加载处理
			IMG.onload = function() {
				window._pandaImageLoadArray.shift();
				IMG.onload = null;  // 解决内存泄漏和GIF图多次触发onload的问题
			}
			IMG.onerror = function(){
				window._pandaImageLoadArray.shift();
				IMG.onerror = null;
			}
			return _loadImages(pics, callback, len);
		}

		return;
	}
	if(callback) _loadProgress(callback, window._pandaImageLoadArray.length, len);
}
// 监听实际的加载情况
function _loadProgress(callback, begin, all){
	var loadinterval = setInterval(function(){
		if(window._pandaImageLoadArray.length != 0 && window._pandaImageLoadArray.length != begin){
			_drawLoadProgress((begin - window._pandaImageLoadArray.length )/all);
		}else if(window._pandaImageLoadArray.length == 0){
			_drawLoadProgress(1)
			setTimeout(function(){
				callback.call(window);
			},500);
			clearInterval(loadinterval);
		}
	},300);
}

function _drawLoadProgress(w){
	var num = Math.floor(w*100) >= 100 ? 100 : Math.floor(w*100);
	$(‘.loading .loading-progress‘).animate({width: num+"%" }, 0, ‘linear‘);
	$(".loading-num").html(num+"%");
}
//滑动
var fullHeight=document.documentElement.clientHeight;
var fullWidth=$(‘body‘).width();
var mousedown = false;
var y1,y2,y3,y4;
var up = false;
var down = false;
var page=0;
var startpage=0;
var endpage=0;
function init(){
	fullHeight=document.documentElement.clientHeight;
	fullWidth=$(‘body‘).width();
	mousedown = false;
	y1,y2,y3,y4;
	up = false;
	down = false;
	page=0;
	$(‘.page1‘).eq(0).show();
	$(‘.swiper-slide‘).css({
	"webkitTransform": "rotateX(0deg) translate3d(0,0,0)",
	"webkitTransitionDuration": "0ms"
	});
	$(‘.zhuanpan-w‘).css({"webkitTransform":"translate3d(0,"+(-1)*fullHeight+"px,0)"});
	$(‘.swiper-slide‘).eq(1).css({"webkitTransform":"translate3d(0,"+(-1)*fullHeight+"px,0)"});
	$(‘.swiper-slide‘).eq(11).css({"webkitTransform":"translate3d(0,"+(-1)*fullHeight+"px,0)"});
	$(‘.swiper-slide‘).eq(20).css({"webkitTransform":"translate3d(0,"+(-1)*fullHeight+"px,0)"});
}
$(‘.hejiong‘).each(function(i){
	$(this).click(function(){
		$(‘.swiper-slide‘).eq(1).show();
		setTimeout(function(){
			$(‘.swiper-slide‘).eq(1).css({
				"webkitTransform": "translate3d(0,0,0)",
				"webkitTransitionDuration": "350ms",
				"webkitTtransitionDtimingFunction": "ease-in"
			});
			$(‘.swiper-slide‘).removeClass(‘slide-active‘).eq(1).addClass(‘slide-active‘);
			video($(‘.hejiong‘).eq(i));
		},300);
		page=1;	
		setTimeout(function(){
			up=true;
			down=true;
			$(‘.fixed‘).fadeIn();
		},1300);
		startpage=0;
		endpage=8;
	});
});
$(‘.linxinru‘).each(function(i){
	$(this).click(function(){
		$(‘.swiper-slide‘).eq(20).show();
		setTimeout(function(){
			$(‘.swiper-slide‘).eq(20).css({
				"webkitTransform": "translate3d(0,0,0)",
				"webkitTransitionDuration": "350ms",
				"webkitTtransitionDtimingFunction": "ease-in"
			});
			$(‘.swiper-slide‘).removeClass(‘slide-active‘).eq(20).addClass(‘slide-active‘);
			video($(‘.linxinru‘).eq(i));
		},300);
		page=20;	
		setTimeout(function(){
			up=true;
			down=true;
			$(‘.fixed‘).fadeIn();
		},1300);
		startpage=19;
		endpage=28;
	});
});
$(‘.lizhiting‘).each(function(i){
	$(this).click(function(){
		$(‘.swiper-slide‘).eq(11).show();
		setTimeout(function(){
			$(‘.swiper-slide‘).eq(11).css({
				"webkitTransform": "translate3d(0,0,0)",
				"webkitTransitionDuration": "350ms",
				"webkitTtransitionDtimingFunction": "ease-in"
			});
			$(‘.swiper-slide‘).removeClass(‘slide-active‘).eq(11).addClass(‘slide-active‘);
			video($(‘.lizhiting‘).eq(i));
		},300);
		page=11;	
		setTimeout(function(){
			up=true;
			down=true;
			$(‘.fixed‘).fadeIn();
		},1300);
		startpage=10;
		endpage=17;
	});
});
function video(_o){
	if(isAndroid){
		_o.parent(‘.swiper-slide‘).find(‘.page1-iframe‘).attr(‘src‘,‘http://v.qq.com/iframe/player.html?vid=p0168scj2ve&tiny=0&auto=0‘);
	}else{
		if(videoplay){
			$(‘.page1-iframe‘).attr(‘src‘,htmlUrl+‘baogeli/blank.html‘);
			$(‘.video-cover,.play-btn‘).show();
			videoplay=false;
		}
	}
	if(pauseClick){
		palying=true;
		yinfuvideo();
	}else{
		palying=false;
		yinfuvideo();
	}
}
document.getElementById(‘audio‘).addEventListener("playing", function(){
	$(‘#yinfu‘).addClass(‘rotating‘);
   palying=true;
});document.getElementById(‘audio‘).addEventListener("pause", function(){
	$(‘#yinfu‘).removeClass(‘rotating‘);
 palying=false;
});
$("body").on("touchstart mousedown",function(e){
	if ( up || down ){
		mousedown = true;
		switch(e.type){
			case "mousedown":
				y1 = e.pageY;
				y3=e.pageX;
				break;
			case "touchstart":
				y1 = e.originalEvent.targetTouches[0].pageY;
				y3 = e.originalEvent.targetTouches[0].pageY;
				break;
		}
	}
})
$("body").on("touchmove mousemove",function(e){
	if (mousedown){
		e.preventDefault();
		switch(e.type){
			case "mousemove":
				y2 = e.pageY;
				break;
			case "touchmove":
				y2 = e.originalEvent.targetTouches[0].pageY;
				break;
		}
		var deg=(y1-y2)*90/fullHeight;		
		var distance=Math.abs(y2-y1);
		if(distance>40){
			if ( (y2 < y1) && up ){	
				//console.log(‘上滑‘);
				if(page==(endpage+1) || page==startpage){return false;}
				down=false;
				up=true;
				//console.log(‘--------------------"‘+page);
				$(‘.swiper-slide‘).hide();
				$(‘.swiper-slide‘).eq(page).show().css({
					"webkitTransform": "rotateX("+deg+"deg) translateY("+(y2-y1)/2+"px) translateZ("+(y2-y1)/-2+"px)",
					"webkitTransitionDuration": "0"
				});
				$(‘.swiper-slide‘).eq(page+1).show().css({
					‘display‘:‘block‘,
					"webkitTransform": "rotateX("+(deg-90)+"deg) translateY("+(fullHeight/2+(y2-y1)/2)+"px) translateZ("+(fullHeight/2+(y2-y1)/2)+"px)",
					"webkitTransitionDuration": "0"
				});
				if((y1-y2)>(fullHeight/2)){
					$(‘.swiper-slide‘).eq(page).css({
						"webkitTransform": "rotateX(90deg) translateY("+fullHeight/-2+"px) translateZ("+fullHeight/2+"px)",
						"webkitTransitionDuration": "500ms"
					});
					$(‘.swiper-slide‘).eq(page+1).css({
						"webkitTransform": "rotateX(0deg) translateY(0px) translateZ(0px)",
						"webkitTransitionDuration": "500ms"
					});					
				}
			}
			if ( (y2 > y1) && down ){	
				//console.log(‘下滑‘);
				//console.log(‘--------------------"‘+page);
				if(page==startpage){return false;}
				up=false;
				down=true;
				$(‘.swiper-slide‘).hide();
				$(‘.swiper-slide‘).eq(page-1).show().css({
					"webkitTransform": "rotateX("+(90+deg)+"deg) translateY("+(fullHeight/-2-(y2-y1)/-2)+"px) translateZ("+(fullHeight/2-(y2-y1)/2)+"px)",
					"webkitTransitionDuration": "0"
				});
				$(‘.swiper-slide‘).eq(page).show().css({
					"webkitTransform": "rotateX("+deg+"deg) translateY("+(y2-y1)/2+"px) translateZ("+(y2-y1)/2+"px)",
					"webkitTransitionDuration": "0"
				});		
				if((y2-y1)>(fullHeight/2)){
					$(‘.swiper-slide‘).eq(page-1).css({
						"webkitTransform": "rotateX(0deg) translateY(0px) translateZ(0px)",
						"webkitTransitionDuration": "500ms"
					});
					$(‘.swiper-slide‘).eq(page).css({
						"webkitTransform": "rotateX(-90deg) translateY("+fullHeight/2+"px) translateZ("+fullHeight/2+"px)",
						"webkitTransitionDuration": "500ms"
					});					
				}
			}
		}	
	}
})
$("body").on("touchend mouseup",function(e){
	switch(e.type){
		case "mousemove":
			y2 = e.pageY;
			break;
		case "touchmove":
			y2 = e.originalEvent.targetTouches[0].pageY;
			break;
	}
	if(up && !down && mousedown){
		if(page>=endpage){$(‘.fixed‘).stop().fadeOut();}else{$(‘.fixed‘).stop().fadeIn();}
		$(‘.swiper-slide‘).eq(page).css({
			"webkitTransform": "rotateX(90deg) translateY("+fullHeight/-2+"px) translateZ("+fullHeight/2+"px)",
			"webkitTransitionDuration": "500ms"
		});
		$(‘.swiper-slide‘).eq(page+1).css({
			"webkitTransform": "rotateX(0deg) translateY(0px) translateZ(0px)",
			"webkitTransitionDuration": "500ms"
		});	
		page++;
		down=true;
		up=true;
		//console.log(‘up‘);
		setTimeout(function(){$(‘.swiper-slide‘).eq(page).siblings(‘.swiper-slide‘).removeClass("slide-active")},500);
		$(‘.swiper-slide‘).eq(page).addClass("slide-active");
		$(‘.page10-con‘).show();
	}	
	if(down && !up && mousedown){	
		$(‘.swiper-slide‘).eq(page-1).css({
			"webkitTransform": "rotateX(0deg) translateY(0px) translateZ(0px)",
			"webkitTransitionDuration": "500ms"
		});
		$(‘.swiper-slide‘).eq(page).css({
			"webkitTransform": "rotateX(-90deg) translateY("+fullHeight/2+"px) translateZ("+fullHeight/2+"px)",
			"webkitTransitionDuration": "500ms"
		});	
		page--;
		if(page<0){page=0;}
		down=true;
		up=true;
		//console.log(‘down‘);
		setTimeout(function(){$(‘.swiper-slide‘).eq(page).siblings(‘.swiper-slide‘).removeClass("slide-active")},500);
		$(‘.swiper-slide‘).eq(page).addClass("slide-active");
		if(page==0 || page==19 || page==10){
			$(‘.fixed‘).stop().fadeOut();
			setTimeout(function(){init();},1000);
		}else{
			$(‘.fixed‘).stop().fadeIn();
		}
		$(‘.page10-con‘).show();
	}
	mousedown = false;
});
$(‘.seemore-a‘).each(function(){
	$(this).click(function(){
		$(‘.swiper-slide‘).hide().eq(0).fadeIn().addClass(‘slide-active‘);
		if(isAndroid){
			$(‘.swiper-slide‘).eq(0).find(‘.page1-iframe‘).attr(‘src‘,‘http://v.qq.com/iframe/player.html?vid=p0168scj2ve&tiny=0&auto=0‘);
		}
		init();
	});
})
//抽奖
var userId=getQueryString("openId");
var ajaxing=false;
var rotateing=false;
var rotate=1440;
var ajaxing1=false;
$(function(){
	$(‘.zhuanpan_irrow‘).click(function(){
		if(ajaxing==true || rotateing==true) return;
		$.get(requestUrl+‘wxGame/choujiang4baogeli.do‘, {
			uid:userId
		}, function(json) {
			ajaxing=true;
			if(json.status==0){
				if(json.type==-1){
					$(‘.prizeagain‘).show();
				}else{					
					if(json.type==6){//谢谢参与
						rotate=300+parseInt(Math.random()*10+1)*5+rotate;
					}
					if(json.type==3){//宝格丽精美纪念册
						$(‘.prizename‘).html(‘宝格丽精美纪念册‘);
						rotate=120+parseInt(Math.random()*10+1)*5+rotate;
					}
					if(json.type==1){ //宝格丽香水
						$(‘.prizename‘).html(‘宝格丽香水‘);
						rotate=240+parseInt(Math.random()*10+1)*5+rotate;
					}
					if(json.type==4){//何炅签名照
						$(‘.prizename‘).html(‘何炅签名照‘);
						rotate=180+parseInt(Math.random()*10+1)*5+rotate;
					}
					if(json.type==2){ //宝格丽纪念邮票集
						$(‘.prizename‘).html(‘宝格丽纪念邮票集‘);
						rotate=parseInt(Math.random()*10+1)*5+rotate;
					}
					if(json.type==5){ //明信片套装
						$(‘.prizename‘).html(‘大美人纪念明信片‘);
						rotate=60+parseInt(Math.random()*10+1)*5+rotate;
					}
					rotateing=true;
					$(‘.zhuanpan‘).css({
						‘-webkit-transition‘:‘all 5s ease‘,
						‘webkit-transform‘:‘rotate(‘+rotate+‘deg)‘
					});
					setTimeout(‘gameover(‘+json.type+‘)‘,6000);
				}
			}
			ajaxing=false;
		}, ‘json‘);
	});
})
var errortips1=true;
var errortips2=true;
var errortips3=true;
function gameover(type){
	document.getElementById(‘voice‘).play();
	setTimeout("document.getElementById(‘voice‘).pause();",500);
	if(type==6){ 
		$(‘.thanks-tips‘).show();
	}else{
		$(‘.prize-ok‘).show();
		$(‘.get-prize-a‘).click(function(){
			$(‘.prizer-info‘).show();
			$(‘.prize-ok‘).hide();
		});
		$(‘.submit‘).click(function(){
			$(‘.name,.mobile,.addr‘).removeClass(‘info-error‘);
			if(!$(‘.name‘).val()){
				$(‘.name‘).addClass(‘info-error‘);
				errortips1=true;
			}else{
				errortips1=false;
			}
			if(!$(‘.mobile‘).val()){
				$(‘.mobile‘).addClass(‘info-error‘);
				errortips2=true;
			}else{
				errortips2=false;
			}
			if(!$(‘.addr‘).val()){
				$(‘.addr‘).addClass(‘info-error‘);
				errortips3=true;
			}else{
				errortips3=false;
			}
			if(ajaxing1 || errortips1 || errortips2|| errortips3){
				setTimeout(function(){
					$(‘.text‘).removeClass(‘info-error‘);
				},1500);
				return;
			}else{
				$.post(requestUrl+‘wxGame/saveUser4baogeli.do‘, {
					name:$(‘.name‘).val(),
					addr:$(‘.addr‘).val(),
					mobile:$(‘.mobile‘).val(),
					uid:userId,
					type:type
				}, function(json) {
					ajaxing1=true;
					if(json.status==0){
						$(‘.prizer-info‘).hide();
						$(‘.comment-ok‘).show();
					}
					ajaxing1=false;
				}, ‘json‘);		
			}
		});
	}
	rotateing=false;
}
$(‘.close‘).click(function(){
	$(this).parents(‘.pop‘).hide();
});

$(‘.game-a‘).click(function(){
	up=down=false;
	$(‘.zhuanpan-w‘).css({
		‘opacity‘:‘1‘,
		"webkitTransform": "translate3d(0,0,0)",
		"webkitTransitionDuration": "350ms"
	});
});
 
$(‘#yinfu‘).click(function(){
	yinfuvideo();
	if(pauseClick==true){pauseClick=false;}else{pauseClick=true;}
});
function yinfuvideo(){
	if(palying==true){
		document.getElementById(‘audio‘).pause();
		document.addEventListener(‘WeixinJSBridgeReady‘,function(){
			WeixinJSBridge.invoke(‘getNetworkType‘,{},function(e){
				document.getElementById(‘audio‘).pause();
			});
		});
		palying=false;
		$(‘#yinfu‘).removeClass(‘rotating‘);
	}else if(palying==false){
		document.getElementById(‘audio‘).play();
		document.addEventListener(‘WeixinJSBridgeReady‘,function(){
			WeixinJSBridge.invoke(‘getNetworkType‘,{},function(e){
				document.getElementById(‘audio‘).play();
			});
		});
		palying=true;
		$(‘#yinfu‘).addClass(‘rotating‘);
	}
}
//字图片集滑动
var picslide=false;
var right=left=true;
var picslideX,picslideX2;
var picindex=0;
var piclen=0;
var popclose=true;
$(‘img‘).click(function(e){
	if($(e.target).data(‘type‘)==‘pic‘){
		up=down=false;
		var piclist=$(e.target).parents(‘.swiper-slide‘).find(‘img‘);
		for(var i=0;i<piclist.length;i++){
			if($(piclist[i]).data("type")=="pic"){
				var src=piclist[i].getAttribute(‘src‘);
				if(e.target.src==piclist.eq(i).attr(‘src‘)){
					$(‘.picslide‘).append(‘<li><img class="nowshow" src="‘+src+‘"/></li>‘);
				}else{
					$(‘.picslide‘).append(‘<li><img src="‘+src+‘"/></li>‘);
				}
			}
		}
		$(‘.picslide-w‘).show();
		$(‘.picslide li‘).each(function(i){
			if($(this).find(‘img‘).hasClass(‘nowshow‘)){
				picindex=-1*i;
			}
		});
		$(‘.picslide‘).css({
			"webkitTransform": "translateX("+$(window).width()*picindex+"px)",
			"webkitTransitionDuration": "0"
		});
		$(‘.picslide li‘).width($(window).width());
		piclen=$(‘.picslide li‘).length;
		$(‘.picslide img‘).each(function(){
			$(this).load(function(){
				if($(this).height()<$(window).height()){
					$(this).css(‘margin-top‘,($(window).height()-$(this).height())/2);
				}
			});
		})
		picslide=true;
	}
});
$(‘body‘).on(‘touchstart‘,function(e){
	if(picslide){
		if(right || left){
			switch(e.type){
			case "touchstart":
				picslideX=e.originalEvent.targetTouches[0].pageX;
				break;
			}
		}
	}
});

$(‘body‘).on(‘touchmove‘,function(e){
	if($(e.target).parents().hasClass(‘picslide‘) && picslide){
		e.preventDefault();
		switch (e.type){
		case "touchmove":
			picslideX2=e.originalEvent.targetTouches[0].pageX;
			break;
		}
		var distance=Math.abs(picslideX2-picslideX);
		var moverange=($(window).width()*picindex)+(picslideX2-picslideX)/2;
		if(distance>60){
			if(picslideX2<picslideX && left){
				$(‘.picslide‘).css({
					"webkitTransform": "translateX("+moverange+"px)"
				});
				right=false;
			}
			if(picslideX2>picslideX && right){
				$(‘.picslide‘).css({
					"webkitTransform": "translateX("+moverange+"px)"
				});
				left=false;
			}
			popclose=false;
		}
	}
});

$(‘body‘).on(‘touchend‘,function(e){
	if(picslide && left && !popclose){
		//console.log("左滑"+picindex);
		if(picindex<=(-1)*piclen+2){picindex=(-1)*piclen+2};
		var moverange=$(window).width()*(picindex-1);
		$(‘.picslide‘).css({
			"webkitTransform": "translateX("+moverange+"px)",
			"webkitTransitionDuration": "500ms"
		});
		picindex--;
	}
	if(picslide && right && !popclose){
		//console.log("右滑"+picindex);
		if(picindex>=-1){picindex=-1};
		var moverange=$(window).width()*(picindex+1);
		$(‘.picslide‘).css({
			"webkitTransform": "translateX("+moverange+"px)",
			"webkitTransitionDuration": "500ms"		
		});
		picindex++;
	}
	left=right=popclose=true;
});
$(‘.picslide,.pop-cur-pic‘).click(function(){
	if(picslide){
		$(‘.picslide‘).html(‘ ‘);
		$(‘.picslide-w‘).hide();
		left=right=up=down=picslide=true;
		picslide=false;
		if($(‘.page10-con‘).attr(‘style‘)){
			if($(‘.page10-con‘).attr(‘style‘).trim()==‘display: none;‘){
				$(‘.page10-con‘).addClass(‘page10-con-slide‘);
			}
		}
	}
});
$(‘.page10-con‘).click(function(){
	$(this).fadeOut();
})
 

touch

标签:end   loading   awl   ase   doc   pos   数组   nsf   androi   

原文地址:https://www.cnblogs.com/litterfour/p/8146265.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!