手机端页面翻屏

浏览数：26 / 时间：2015年06月11日

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<link href="style/master.css" rel="stylesheet" type="text/css"/>
<style>
html,body{ width:100%; height:100%; overflow:hidden;}
.rel_box{ position:relative; width:100%; height:100%; overflow:hidden;}
#wrap{ position:absolute; width:100%; left:0; top:0; overflow:hidden;}
.screen{ width:100%; overflow:hidden;}
#screen1{ background:url(images/s1_bg.jpg) center top no-repeat #000; background-size:100% auto;}
#screen2{ background-color:#000}
#screen3{ background-color:#fff}
</style>
<title>翻屏</title>
</head>
<body>
<div class="rel_box">
<div id="wrap">
	<!--1-->
	<div id="screen1" class="screen"></div>
	<!--2-->
	<div id="screen2" class="screen"></div>
	<!--3-->
	<div id="screen3" class="screen"></div>
</div>
</div>
<script type="text/javascript" src="http://zhuxian.wanmei.com/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
	var now = 0, len = $(‘.screen‘).size(), touchs = touche = 0, h =$(‘.rel_box‘).height();
	$(‘.screen‘).css(‘height‘,h);
	
	function resetAnm(){//恢复动画原状态
	
	}
	
	function screenN(n){
		resetAnm();
		switch(n) {
			case 0 :
				//第一屏加入动画
				break;
			case 1 :
				//第二屏加入动画
				break;
			//.....
		}
		$(‘#wrap‘).css({‘transition-duration‘:‘0.3s‘,‘transform‘:‘translate3d(0,-‘+n*(parseInt(h))+‘px,0)‘})
	}
	$(document).on(‘touchmove‘,function(e){
		e.preventDefault();
	});
	$(document).on(‘touchstart‘,function(e){
		touchs = e.originalEvent.touches[0].pageY;
	});
	$(document).on(‘touchend‘,function(e){
		touche = e.originalEvent.changedTouches[0].pageY;
		if(now < (len - 1) && (touche - touchs) < -20){
			now++;				
		}
		if(now > 0 && (touche - touchs) > 20){
			now--;
		}
		screenN(now);
	});
});
</script>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

手机端页面翻屏