<!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{ 100%; height:100%; overflow:hidden;}
.rel_box{ position:relative; 100%; height:100%; overflow:hidden;}
#wrap{ position:absolute; 100%; left:0; top:0; overflow:hidden;}
.screen{ 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>