<!DOCTYPE >
<meta charset="utf-8" />
<head>
<title>测试jquery</title>
<script src="jquery.js"></script>
<script src="swipe.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
</head>
<style type="text/css">
#div1{
background-color: red;
width:100%;
height: 100%;
display: block;
top:-100%;
position: fixed;
}
#div2{
background-color: blue;
width: 100%;
height: 100%;
display: block;
top:100%;
position:fixed;
}
#div3{
background-color: yellow;
width: 100%;
height: 100%;
display: block;
top: 100%;
position: fixed;
}
#div4{
background-color:green;
width: 100%;
height: 100%;
display: block;
position:fixed;
top: 100%;
}
</style>
<body>
<div id="div0">
<div id="div1">我是第一页</div>
<div id="div2">我是第二页</div>
<div id="div3">我是第三页</div>
<div id="div4">我是第四页</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var nowpage=1;
load1();
function load1(){
$("#div1").animate(
{top:"0%"},200
);
}
function move1(){
$("#div1").animate(
{top:"-100%"},200
);
}
function load2(){
$("#div2").animate({
top:"0%"
},200);
}
function move2to1() {
$("#div2").animate({
top: "100%"
}, 200);
};
function move2to3() {
$("#div2").animate({
top: "-100%"
}, 200);
};
function load3() {
$("#div3").animate({
top: "0%"
}, 200);
};
function move3() {
$("#div3").animate({
top: "100%"
}, 200);
};
function move3to4() {
$("#div3").animate({
top: "-100%"
}, 300);
};
function load4() {
$("#div4").animate({
top: "0%"
},300);
};
function move4() {
$("#div4").animate({
top: "100%"
}, 300);
};
$("#div0").swipe({
swipe: function(event, direction, distance, duration, fingerCount) {
if (direction == "up") {
nowpage = nowpage + 1;
if (nowpage == 2) {
move1();
load2();
}
if (nowpage == 3) {
move2to3();
load3();
} if(nowpage==4){
move3to4();
load4();
}
} else if (direction == "down") {
nowpage = nowpage - 1;
if (nowpage == 1) {
move2to1();
load1();
}
if (nowpage == 2) {
move3();
load2();
}
if (nowpage == 3) {
move4();
load3();
}
}
if (nowpage > 4) {
nowpage = 4;
}
if (nowpage < 0) {
nowpage = 0;
}
}
});
});
</script>