<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no"/>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=black” />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta name="Author" contect="Mr.He"/ >
<style>
html,body{width:100%;height:100%;margin:0;padding:0;}
section{overflow:hidden;}
section > div{display:-webkit-box;}
section > div > div{height:200px;width:100%;}
#drag{
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:0.5s;
-webkit-transition-timing-function:cubic-bezier;
-webkit-transform:translate(0,0);
}
</style>
</head>
<body>
<section>
<div id="drag">
<div style="background:red;"></div>
<div style="background:blue;"></div>
<div style="background:green;"></div>
<div style="background:yellow;"></div>
<div style="background:gray;"></div>
</div>
</section>
<script>
function $(id){return document.getElementById(id)};
var dragElem = $("drag");
var startPos = {x:null,y:null};
var touching = false;
var disX = 0;
var tx = 0;
function touchstart(event){
event.preventDefault();
startPos.x = event.touches[0].pageX;
startPos.y = event.clientY;
touching = true;
}
function touchmove(event){
event.preventDefault();
if(touching){
disX = event.touches[0].pageX - startPos.x;
dragElem.style.webkitTransitionProperty = "";
dragElem.style.webkitTransitionDuration = "0s";
dragElem.style.webkitTransform = "translate("+(640*tx+disX)+"px, 0)";
}
}
function touchend(){
touching = false;
dragElem.style.webkitTransitionProperty = "-webkit-transform";
dragElem.style.webkitTransitionDuration = "0.5s";
alert(disX);
if(tx == -4 && disX < 0){
dragElem.style.webkitTransform = "translate("+640*tx+"px, 0)";
return;
}else if(tx == 0 && disX > 0){
dragElem.style.webkitTransform = "translate("+640*tx+"px, 0)";
return;
}else if(disX > 320){
tx++;
dragElem.style.webkitTransform = "translate("+640*tx+"px, 0)";
}else if(disX < -320){
tx--;
dragElem.style.webkitTransform = "translate("+640*tx+"px, 0)";
}else{
dragElem.style.webkitTransform = "translate("+640*tx+"px, 0)";
}
disX = 0;
}
dragElem.addEventListener("touchstart",touchstart,false);
dragElem.addEventListener("touchmove",touchmove,false);
dragElem.addEventListener("touchend",touchend,false);
dragElem.addEventListener("touchcancel",touchend,false);
</script>
</body>
</html>