<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<style>
*{ margin: 0 auto;}
html{height:100%; margin: 0;padding: 0;}
body{width:100%;height:100%;margin:0;overflow:hidden; margin:0 auto;}
ul{width:100%;height:100%;margin:0;padding:0;overflow:hidden;position:relative;}
.clearfix:after { content:".";display:block;height: 0; clear: both; visibility: hidden;}
.clearfix{ display: inline-block;}
.clearfix{ display:block;}
ul li{list-style:none;width:100%;height:100%;position:absolute;left:0;margin:0;}
.on{z-index:999;}
</style>
</head>
<body>
<ul touchDir="1" class="clearfix">
<li class="sty" style="background:#f1076a; display:block;"></li>
<li class="sty" style="background:#1f6ee5; display:none;"></li>
<li class="sty" style="background:#ef6767;display:none;"></li>
<li class="sty" style="background:#5ef6e9;display:none;"></li>
<li class="sty" style="background:#2da00e;display:none;"></li>
</ul>
</body>
<script type="text/javascript" src="zepto/zep.js"></script>
<script type="text/javascript" src="zepto/touch.js"></script>
<script type="text/javascript" src="zepto/an.js"></script>
<script type="text/javascript">
$(function(){
var touchDir=$('ul').touchDir
var listBox=$('ul li');
var boxWidth=$('ul').eq(0).width();
var boxHeight=$('ul').eq(0).height();
function NextPage(){
alert(0)
console.log('test');
// if(listBox.is(':animated')){return;}
if(touchDir==="1"){
if($(this).index()===-1){return;}
$(this).next().addClass('on').siblings().removeClass('on');
$(this).next().animate({top:0},500,function(){
$(this).position().top=-boxHeight+'px';
$(this).hide();
})
}
}
function PrevPage(){
// if(listBox.is(':animated')){return;}
if(touchDir==="1"){
if($(this).index()===0){return;}
$(this).prev().addClass('on').show().siblings().removeClass('on');
$(this).animate({top:boxHeight},500,function(){
$(this).hide();
})
$(this).prev().animate({top:0},500);
}
}
listBox.bind("swipeUp",NextPage());
listBox.bind("swipeDown",PrevPage());
})
</script>
</html>
<!DOCTYPE html>
<script type="text/javascript" src="zepto/touch.js"></script>
<script type="text/javascript" src="zepto/an.js"></script>