css部分
*{
padding: 0;
margin: 0;
}
body,html{
width: 100%;
height: 100%;
}
.fulldiv{
width: 100%;
height: 100%;
}
#page1{
background: red;
display: block;
}
#page2{
background: green;
display: none;
position: relative;
opacity: 0;
}
#test{
width: 100px;
height: 100px;
border: 2px solid black;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#wenzi{
width: 300px;
height: 40px;
font-size: 25px;
border: 2px solid black;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#page3{
background: skyblue;
display: none;
}
</style>
html部分
<div class="fulldiv" id="page1">
<div id="wenzi">1%</div>
</div>
<div class="fulldiv" id="page2">
<div id="test">666</div>
</div>
<div class="fulldiv" id="page3">
<div id="wenzi">
here is 3 page
</div>
</div>
<script type="text/javascript">
function by(element){
var newElement = document.getElementById(element);
return newElement;
}
document.onreadystatechange = function (){
if(document.readyState == "loading"){
by("wenzi").innerHTML = "25%";
}else if(document.readyState == "interactive"){
by("wenzi").innerHTML = "50%";
}else if(document.readyState == "complete"){
var num = 66;
var st = setInterval(function(){
num+=Math.round(Math.random()*10);
by("wenzi").innerHTML = num+"%";
if(num>=95){
by("wenzi").innerHTML = 100+"%";
clearInterval(st);
changePage("page1","page2");
}
},1200);
}
}
function fadeOut(element){
var speed = speed || 30;
var num = 10;
var st = setInterval(function(){
num--;
by(element).style.opacity = num/10;
by(element).style.display = "none";
if(num<=0){
clearInterval(st);
}
},speed);
}
function fadeIn(element,speed){
var speed = speed || 30;
var num =0;
var st = setInterval(function(){
by(element).style.display = "block";
num++;
by(element).style.opacity = num/10;
if(num>=10){
clearInterval(st);
}
},speed);
}
function changePage(firstElement,secondElement){
fadeOut(firstElement);
fadeIn(secondElement);
}
var startx,starty,endx,endy;
document.addEventListener("touchstart",function(e){
startx = Math.round(e.touches[0].pageX);
starty = Math.round(e.touches[0].pageY);
console.log(starty);
},false);
document.addEventListener("touchend",function(e){
endx = Math.round(e.changedTouches[0].pageX);
endy = Math.round(e.changedTouches[0].pageY);
var result = getResult();
updatePage(result,"page2","page3");
},false);
function getResult(){
// only by the the value is 1 can be allowed
var value = 0;
if(((starty-endy)/starty)*100>=20){
if((Math.abs(startx-endx)/startx)*100<=30){
value = 1;
}
}else{
console.log("not allow");
}
return value;
}
function updatePage(key,element1,element2){
var result = key;
if(result==1){
changePage(element1,element2);
}
}
</script>