js 移动前端，手动滚动效果

<!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>
js 移动前端，手动滚动效果

猜你喜欢
