<!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>